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

oxcyiej7  于 2022-12-02  发布在  其他
关注(0)|答案(5)|浏览(154)

我一直在冲浪很长时间，知道如何创建一个子菜单的垂直导航页面为我的网站。
我希望使用简单的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代码只显示父菜单。当鼠标悬停在父菜单上时，子菜单应该出现。
请帮帮我。如果有什么事请回信。

Html

5条答案

按热度按时间
svdrlsy4

svdrlsy41#

#submenu{
display:none;
}

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

我建议子菜单使用class而不是id，因为您可能希望有多个子菜单。

赞(0）分享  回复(0）举报  2022-12-02
iyzzxitl

iyzzxitl2#

<!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>
赞(0）分享  回复(0）举报  2022-12-02
kwvwclae

kwvwclae3#

这应该适用于您的情况。

#nav #subMenu{
    display:none;
}

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

虽然你应该使用类而不是id。并且记住：hover只对链接可用，在IE6中。

赞(0）分享  回复(0）举报  2022-12-02
7y4bm7vi

7y4bm7vi4#

您可以使用以下适合您的方法：
#nav #subMenu{ display:none; }
#nav li:hover #subMenu { display: block; position:absolute; left:228px; background:#D8D8D8; padding:0; }

赞(0）分享  回复(0）举报  2022-12-02
dohp0rv5

dohp0rv55#

您可以使用巢状清单和绝对定位来完成此作业：

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

赞(0）分享  回复(0）举报  2022-12-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com