HTML＆CSS - 似乎无法弄清为什么下拉菜单不起作用。

我似乎无法得到最简单的基本下拉菜单的工作。我在经历反复试验时正在学习。我很抱歉，如果这是明显的事情！HTML＆CSS - 似乎无法弄清为什么下拉菜单不起作用。

这里的HTML：

<body> 

<div class="drop"> 
<ul class="drop_menu"> 
<ul> 
    <li><a href="main.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
     <ul> 
      <li><a href="biography.html">Biography</a></li> 
      <li><a href="statement.html">Statement</a></li> 
      <li><a href="CV">CV</a></li> 
     </ul> 

     <li><a href="gallery.html">New Work</a></li> 
     <li><a href="archive.html">Archive</a></li> 
     <li><a href="collaboration.html">collaboration</a></li> 
     <li><a href="news.html">News</a></li> 
</ul> 
</ul> 
</div> 
</body>

CSS：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

ul li { 
    display: inline-block; 
    width: 10em; 
    height: 2em; 
    line-height: 2em; 
    position: relative; 
    border-bottom: 2px solid #ccc; 
} 

ul li:hover { 
    background-color: #ffa; 
} 

ul li ul { 
    display: none; 
    position: absolute; 
    top: 2em; 
    left: 0; 
} 

ul li:hover ul { 
    display: block; 
}

对于笔画演示：http://jsfiddle.net/7env3ust/

我在做什么错？

来源

2015-10-14 Dr_Strangebone

对于嵌套列表，您的内部<ul>必须是里面的 a <li>。

<ul> 
    <li><a href="main.html">Home</a></li> 
    <li><a href="about.html">About</a> 
     <ul> 
      <li><a href="biography.html">Biography</a></li> 
      <li><a href="statement.html">Statement</a></li> 
      <li><a href="CV">CV</a></li> 
     </ul> 
    </li> 
    <li><a href="gallery.html">New Work</a></li> 
    <li><a href="archive.html">Archive</a></li> 
    <li><a href="collaboration.html">collaboration</a></li> 
    <li><a href="news.html">News</a></li> 
</ul>

有关更多信息，请参阅this answer。

来源

2015-10-14 22:47:08 Dhaust

这点击我最多。非常感谢你！ –

你的ul实际上就在你的li之外，所以它总是显示，看看fixed的例子。

下面是它应该如何看：

<li><a href="about.html">About</a> 
    <ul> 
     <li><a href="biography.html">Biography</a> 

     </li> 
     <li><a href="statement.html">Statement</a> 

     </li> 
     <li><a href="CV">CV</a> 

     </li> 
    </ul> 
    </li>

来源

2015-10-14 22:44:44

你的孩子ul必须是内li

<li><a href="about.html">About</a> 
    <ul> 
     <li><a href="biography.html">Biography</a> 

     </li> 
     <li><a href="statement.html">Statement</a> 

     </li> 
     <li><a href="CV">CV</a> 

     </li> 
    </ul> 
</li>

DEMO

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    width: 10em; 
 
    height: 2em; 
 
    line-height: 2em; 
 
    position: relative; 
 
    border-bottom: 2px solid #ccc; 
 
} 
 

 
ul li:hover { 
 
    background-color: #ffa; 
 
} 
 

 
ul li ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 2em; 
 
    left: 0; 
 
} 
 

 
ul li:hover ul { 
 
    display: block; 
 
    background-color: red; 
 
    z-index: 2; 
 
}

<body> 
 
    <div class="drop"> 
 
     <ul class="drop_menu"> 
 
       <li><a href="main.html">Home</a> 
 

 
       </li> 
 
       <li><a href="about.html">About</a> 
 
        <ul> 
 
         <li><a href="biography.html">Biography</a> 
 

 
         </li> 
 
         <li><a href="statement.html">Statement</a> 
 

 
         </li> 
 
         <li><a href="CV">CV</a> 
 

 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="gallery.html">New Work</a> 
 

 
       </li> 
 
       <li><a href="archive.html">Archive</a> 
 

 
       </li> 
 
       <li><a href="collaboration.html">collaboration</a> 
 

 
       </li> 
 
       <li><a href="news.html">News</a> 
 

 
       </li> 
 
     </ul> 
 
    </div> 
 
</body>

来源

2015-10-14 22:44:58 slashsharp

HTML＆CSS - 似乎无法弄清为什么下拉菜单不起作用。

回答

相关问题