如何使用CSS只为垂直导航栏创建子菜单

我一直在冲浪很久才知道如何为我的网站创建垂直导航页面的子菜单。如何使用CSS只为垂直导航栏创建子菜单

我想要使用简单的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代码才能显示父菜单。将鼠标悬停在父菜单上时，应显示子菜单。

请帮我一把。如果有任何问题，请回信。

来源

2013-10-02 Ajinkya Mahagaonkar

http://phrogz.net/css/WhyTablesAreBadForLayout.html – Gregoire

#submenu{ 
display:none; 
} 

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

我推荐使用class而不是id作为子菜单，因为您可能希望有多个类别。

来源

2013-10-02 15:29:22 Kuzgun

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Sample </title> 
<!--<link rel="stylesheet" href="Style.css" type="text/css" >--> 
<style type="text/css" media="screen"> 
#horizontalmenu ul { 
padding:1; 
margin:2; 
list-style:none; 
} 
#horizontalmenu li { 
float:left; 
position:relative; 
padding-right:60; 
display:block; 
border:2px solid #FF0000; 
border-style:outset; 
} 
#horizontalmenu li ul { 
    display:none; 
position:absolute; 
} 
#horizontalmenu li:hover ul{ 
    display:block; 
    background:#F9F2FF; 
    height:auto; width:14em; 
} 
#horizontalmenu li ul li{ 
clear:both; 
border-style:none; 
} 
</style> 


</head> 

<body> 
<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0"> 
    <tr> 
    <td valign="top"> 
    <form id="cse-search-box" action="home.html"> 
    <table width="100%" height="100%" border="0" bgcolor="#FDFEFF"> 
    <tr> 
    <td height="120" width="190">&nbsp;</td> 
    <td height="120" width="190"><!--<img src="Images/Laptop2.jpg" height="120" width="190" />--></td> 
    <td height="120" width="190" align="center">&nbsp;</td> 
    <td height="120" width="180"><table width="180" height="120" border="0"> 
     <tr> 
     <td><font color="#663333"> Call our LapTop Expert</font></td> 
     </tr> 
     <tr> 
     <td ><font color="#666633"> +919855566689</font></td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     </tr> 
    </table></td> 
    <td height="120" width="210">&nbsp;</td> 
    </tr> 
    <tr> 
    <td colspan="4" > 
    <div id="horizontalmenu"> 
     <ul> <li><a href="sample.html">Home</a></li> 
    <li><a href="#">Battery</a> 
     <ul><li><a href="Batterysample.html">HP Laptop Battery</a></li> 
     <li><a href="SonyBattery.html">Sony Laptop Battery</a></li> 
     <li><a href="DellBattery.html">Dell Laptop Battery</a></li> 
     <li><a href="LenovoBattery.html">Lenovo Laptop Battery</a></li></ul></li> 
    <li><a href="#">Adapter</a> 
     <ul> <li><a href="HP Battery.html">HP Laptop Adapter</a></li> 
     <li><a href="#">Sony Laptop Adapter</a></li> 
     <li><a href="#">Dell Laptop Adapter</a></li> 
     <li><a href="#">Lenovo Laptop Adapter</a></li> 
     <li><a href="#">Toshiba Laptop Adapter</a></li></ul></li> 
    <li><a href="#">Laptop Care</a> 
     <ul> <li><a href="Battery care.html">Battery Care Practices</a></li></ul></li> 
    <li><a href="#">Service Status</a></li> 

    </ul> 
</div> </td> 
    <td align="right"> 
     <input type="text" placeholder="Search" /> 
    &nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td align="right"> 
    <input type="submit" name="sa" value="Search" />&nbsp;&nbsp;</td> 
    </tr> 
    <tr> 
    <td colspan="5" height="70" bgcolor="#F0F0F0" valign="bottom"><font face="Agency FB" size="+4" color="#FFA8A8">Dell Laptop Battery </font></td> 
    </tr> 
    <tr> 
    <td colspan="5"bgcolor="#FFA6A6"></td> 
    </tr> 

    <!--<tr> 
    <td colspan="5" height="30"><font face="Agency FB" size="+2" color="#AAAAFF">Display&nbsp;</font> 
    <select><option value="5">5</option> 
    <option value="10" selected="selected">10</option> 
    <option value="15">15</option> 
    <option value="20">20</option> 
    <option value="25">25</option> 
    <option value="30">30</option> 
    <option value="50">50</option> 
    <option value="100">100</option> 
    <option value="0">All</option> 
</select> 
    </td> 
    </tr>--> 
    <tr> 
    <td colspan="5"> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell 14r Battery </font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron 1464 Battery </font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron 1525 Battery </font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron M5010 9 cell Battery</font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron N5010 Battery</font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Latitude E5500 Battery </font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Vostro 1500 Battery</font></p> 
    <p><font face="Agency FB" size="+2" color="#FF0000">Dell Vostro 1510/1520/1310 Battery </font></p> 

    </td> 
    </tr> 

    <tr> 
    <td colspan="5" height="30">&nbsp; </td> 
    </tr> 

    <tr> 
    <td colspan="5" height="200">&nbsp;</td> 
    </tr> 
    <tr> 
    <td colspan="5" bgcolor="#663300"></td> 
    </tr> 
</table> 
     </form> 
    </td> 
    <tr bgcolor="#F4EAEA"> 
    <td> 
     <table width="100%" border="0"> 
     <tr> 
      <td width="250"><font face="Agency FB" color="#FF0000" size="5">Company Info</font></td> 
      <td width="250"><font face="Agency FB" color="#FF0000" size="5">Terms & Conditions</font></td> 
      <td width="250"><font face="Agency FB" color="#FF0000" size="5"></font></td> 
      <td width="250"><font face="Agency FB" color="#FF0000" size="5">Bangalore</font></td> 
     </tr> 
     <tr> 
     <td bgcolor="#FCF8F8"></td> 
     <td bgcolor="#FCF8F8"></td> 
     <td bgcolor="#FCF8F8"></td> 
     <td bgcolor="#FCF8F8"></td> 
     </tr> 
     <tr> 
      <td width="250"><a href="About.html"><font face="Times New Roman, Times, serif" color="#333300">About Us </font></a></td> 
      <td width="250"><font face="Times New Roman, Times, serif" color="#333300">Privacy Policy </font></td> 
      <td width="250" rowspan="5">&nbsp;</td> 
      <td width="250" rowspan="5" valign="top">&nbsp;</td> 
     </tr> 
     <tr> 
      <td width="250"><a href="Contact.html"><font face="Times New Roman, Times, serif" color="#333300">Enter Details To Get Service </font></a></td> 
      <td width="250"><font face="Times New Roman, Times, serif" color="#333300">Collection Centers </font></td> 
     </tr> 
     <tr> 
      <td width="250"><a href="Service Expertise.html"><font face="Times New Roman, Times, serif" color="#333300">Service Expertise </font></a></td> 
      <td width="250"><font face="Times New Roman, Times, serif" color="#333300">Services</font></td> 
     </tr> 
     <tr> 
      <td width="250"><font face="Times New Roman, Times, serif" color="#333300">Customer Reviews </font></td> 
      <td width="250">&nbsp;</td> 
     </tr> 
      <tr> 
      <td width="250">&nbsp;</td> 
      <td width="250">&nbsp;</td> 
     </tr> 
     <tr> 
     <td colspan="4">&nbsp;</td> 
     </tr> 
     <tr> 
     <td colspan="4" bgcolor="#FF9393"></td> 
     </tr> 

     </table></td> 
     </tr> 

    </tr> 
</table> 
</body> 
</html>

来源

2014-02-08 04:38:35 user3286306

解释你已经改变了什么。 – falsetru

这应该在你的情况下工作..

#nav #subMenu{ 
    display:none; 
} 

#nav li:hover #subMenu { 
    display: block; 
}

虽然你应该使用类来代替IDS。请记住：悬停仅适用于IE6中的链接。

来源

2014-06-13 15:24:26 vascomotaborges

你可以用以下这对你的工作：

#nav #subMenu{ display:none; }

#nav li:hover #subMenu { display: block; position:absolute; left:228px; background:#D8D8D8; padding:0; }

来源

2016-03-22 11:58:28

您可以嵌套列表和绝对定位做到这一点：

nav { 
    display: inline-block; 
} 

.submenu { 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 

.menu > li { 
    position: relative; 
} 

.menu li:hover .submenu { 
    display: block; 
}

这里是一个肮脏的例子http://codepen.io/JKudla/pen/mWGwqp?editors=1100

来源

2017-03-27 15:38:36

如何使用CSS只为垂直导航栏创建子菜单

回答

相关问题