如何仅使用css为垂直导航栏创建子菜单

Question

我一直在冲浪,知道如何为我的网站创建垂直导航页面的子菜单.

我想要使​​用简单的CSS.

我的nav.jsp页面包含所有导航链接.其代码如下

    <table width="220" cellspacing="0" cellpadding="0" height="100%">
    <tr>
        <td bgcolor="#D8D8D8" valign="top">
        <ul id="nav">
        <li><a href="home.jsp">&nbsp;&nbsp;Home</a>
        </li>
        <li><a href="addCompanyDetails.jsp">&nbsp;&nbsp;Add Company Details</a>     
                    </li>
        <li><a href="modifyCompanyDetails.action">&nbsp;&nbsp;Modify Company Details</a>
            <ul id = "subMenu">
            <li>Sub Menu 1
            </li>
            <li>Sub Menu 2
            </li>
            <li>Sub Menu 3
            </li>
            <li>Sub Menu 4
            </li>
            </ul>
        </li>
        <li><a href="deleteCompanyDetails.action">&nbsp;&nbsp;Delete Company Details</a>
        </li>
        <li><a href="search.jsp">&nbsp;&nbsp;Search</a>
        </li>
        <li><a href="viewAllDetails.action">&nbsp;&nbsp;View All Details</a>
        </li>
        </ul>
                </td>
        </tr>
    </table>

我已经为父链接编写了我的css代码.相同的CSS代码如下

    #nav {
padding: 0;
margin: 0;
width: 220px;
padding: 0px;
border: 0px;
margin: 0px;
    }

    #nav li {
width: 100%;
display: block;
float: left;
height: 35px;
border-bottom: 1px solid #ffffff;
    }

    #nav li a {
width: 100%;
display: block;
float: left;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #000000;
    }

    #nav li a:hover {
width: 100%;
display: block;
float: left;
height: 35px;
line-height: 35px;
background-color: #404040;
color: #ffffff;
    }

没有CSS代码来显示子菜单.我只有CSS代码才能显示父菜单.在父菜单上鼠标悬停时,应显示子菜单.

请帮帮我.如果有的话请回信.

Answer 1

#submenu{
display:none;
}

#nav li:hover > ul{
display:block;
}

我建议使用 class 而不是 id 作为子菜单，因为您可能想要多个菜单。