Question

我已经尝试了几个代码示例，但它们都不起作用......我创建了一个空白的HTML和CSS文档，仅用于测试。这就是我现在拥有的;它似乎没有起作用：

HTML：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Test</title>
 </head>
 <body>
 <nav id="nav">
   <ul>
    <li>Home</li>
   <li>Menu1
    <ul>
     <li>Sub1</li>
     <li>Sub2</li>
    </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
  </ul>
 </li>
 </ul>
</nav>
</body>
</html>

CSS：

nav ul li {
   display:  block;
   float: left;
   width: relative;
}
nav ul ul {
   display: none;  
}
nav ul li:hover > ul {
   display: block;
   position: absolute;
   margin-left: -30px;}

nav ul ul li {
 display: block; 
   float: none;
}

Answer 1

您需要将width规则中的nav ul li更改为position。请参阅此JSFiddle。

nav ul li {
   display:  block;
   float: left;
   position: relative;
}

无法获取CSS下拉菜单

1 个答案: