使用CSS的下拉菜单_Css - Fatal编程技术网

使用CSS的下拉菜单

css

使用CSS的下拉菜单,css,Css,我是一个网络编程新手！我一直在制作一个下拉菜单，这是我得到的： HTML代码 <!DOCTYPE html> <head> <title>Drop Down Menu</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Drop Down Menu</h1> <hr

我是一个网络编程新手！我一直在制作一个下拉菜单，这是我得到的：

HTML代码

<!DOCTYPE html>
<head>
<title>Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Drop Down Menu</h1>
<hr>
<div>
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Categories</a>
      <ul id="sub">
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Design</a></li>
         <li><a href="#">Web</a></li>
          <ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>
      </ul>
    </li>
    <li><a href="#">Popular</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
 </div>
</body>
</html>`

我的问题是，在Web子块上悬停时，HTML和CSS UL不会显示。我做错了什么？

请找到下面的JSIDLE链接

更新的HTML的一部分

<li><a href="#">Web</a>
            <ul id="sub2" class="submenu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
         </li>

你的标记似乎有点错误

<li><a href="#">Web</a></li>
          <ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>

这应该是这个

<li><a href="#">Web</a>
            <ul id="sub2" class="submenu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
         </li>

2您可以将样式添加到类中，而不是将样式添加到id中，以便在其他下拉列表中也可以使用相同的类

希望这有帮助

您需要添加的HTML结构不正确

<ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>

并排

nav-sub-li:hover-sub2{display:block}nav-li:hover-sub2{display:block}我猜您的规则应用不正确。。。

<li><a href="#">Web</a>
            <ul id="sub2" class="submenu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
         </li>

<ul id="sub2">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul>