我一直在冲浪，知道如何为我的网站创建垂直导航页面的子菜单。
我想要使用简单的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"> Home</a>
</li>
<li><a href="addCompanyDetails.jsp"> Add Company Details</a>
</li>
<li><a href="modifyCompanyDetails.action"> 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"> Delete Company Details</a>
</li>
<li><a href="search.jsp"> Search</a>
</li>
<li><a href="viewAllDetails.action"> 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代码才能显示父菜单。 在父菜单上鼠标悬停时，应显示子菜单。
请帮帮我。如果有的话请回信。
答案 0 :(得分：0)
#submenu{
display:none;
}
#nav li:hover > ul{
display:block;
}
我建议使用class而不是子菜单的id，因为你可能想要多个。
答案 1 :(得分：0)
<!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"> </td>
<td height="120" width="190"><!--<img src="Images/Laptop2.jpg" height="120" width="190" />--></td>
<td height="120" width="190" align="center"> </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> </td>
</tr>
</table></td>
<td height="120" width="210"> </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" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">
<input type="submit" name="sa" value="Search" /> </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 </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"> </td>
</tr>
<tr>
<td colspan="5" height="200"> </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"> </td>
<td width="250" rowspan="5" valign="top"> </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"> </td>
</tr>
<tr>
<td width="250"> </td>
<td width="250"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="4" bgcolor="#FF9393"></td>
</tr>
</table></td>
</tr>
</tr>
</table>
</body>
</html>
答案 2 :(得分：0)
这适用于您的情况..
#nav #subMenu{
display:none;
}
#nav li:hover #subMenu {
display: block;
}
虽然您应该使用类而不是ID。 请记住：hover仅适用于IE6中的链接。
答案 3 :(得分：0)
您可以使用以下内容为您服务：
#nav #subMenu{
display:none;
}
#nav li:hover #subMenu {
display: block;
position:absolute;
left:228px;
background:#D8D8D8;
padding:0;
}
答案 4 :(得分：0)
您可以使用嵌套列表和绝对定位完成此操作：
nav {
display: inline-block;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
}
.menu > li {
position: relative;
}
.menu li:hover .submenu {
display: block;
}