下拉菜单定位

Question

我试图用CSS创建一个下拉菜单，并且我已经成功隐藏了下拉菜单，但一直未能使其重新出现。我很确定问题出在：hover标签，我已经从这里取出了css标签，因为我一直无法使它工作。帮助与CSS？请？绝望。

HTML代码：

<div id="navigation"> 
    <ul id="menu"> 
     <li class="menu"><a href="#home">Home</a></li> 
     <li class="menu"><a href="#news">About Us</a></li> 
     <ul class="sub_menu"> 
      <li>Our Mission Statement</li> 
      <li>How Funds Are Spent</li> 
      <ul class="sub_sub_menu"> 
       The Founders 
       <li>A</li> 
       <li>B</li> 
       <li>C</li> 
       <li>D</li> 
       <li>E</li> 
       <li>F</li> 
      </ul> 
     </ul> 
     <li class="menu"><a href="#contact">What We Do</a></li> 
     <ul class="sub_menu"> 
      <li>T-Shirt Designs</li> 
      <li>Future Design Ideas</li> 
      <ul class="sub_sub_menu"> 
       Fact Sheets 
       <li>How Our Fact Sheets Work</li> 
       <li>Fact Sheet 1</li> 
      </ul> 
     </ul> 
     <li class="menu"><a href="#about">Media</a></li> 
     <li class="menu"><a href="#contact">Contact Us</a></li> 
    </ul> 
</div> 

CSS如下：

ul { 
    position: absolute; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    padding-top: 0px; 
    padding-bottom: 0px; 
} 
li.menu { 
    display: inline 
} 
a:link, a:visited { 
    font-weight: bold; 
    font-size: 14px; 
    color: #FFFFFF; 
    background-color: #B4B7BD; 
    text-align: center; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    padding-right: 20px; 
    padding-left: 20px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
a:hover, a:active { 
    background-color: #B4B7BD 
} 
ul.sub_menu li { 
    position: relative; 
    display: none; 
    width: 100%; 
} 
ul.sub_sub_menu { 
    position: relative; 
    display: none; 
} 
ul.sub_sub_menu li { 
    position: relative; 
    display: none; 
    width: 100%; 
    left: 100%; 
} 

Answer 1

HTML问题

首先

<ul class="sub_sub_menu">The Founders 

这是非法的内部的无序文本列表标签，如果这是为了列表的标题，那么标题需要是无序列表嵌套在列表项中的文本/链接。

而且，你已经这样做了好几次：

​​

在您的代码需要：

<li class="menu"><a href="#news">About Us</a> 
    <ul class="sub_menu"> 
     <li>Our Mission Statement</li> 
     <li>How Funds Are Spent</li> 
    </ul> 
</li> 

可以看到，无序列表是在第二个例子正确地嵌套，然而在第一个不是，导致你的问题。

这些都是我认为的HTML问题，现在到了CSS。

CSS问题

您应该只将代码添加到你的CSS，使这项工作，这里是如何让第一个子菜单显示当你翻转菜单项的例子。

li.menu:hover ul li { 
     display: block; 
} 

只需重复说明，您可以获得各子子子菜单。

最后一件事是你对选择器的使用有点粗略，如果你有“.sub_menu”作为一个类，那么你不需要在元素类型前添加它，除非有多种元素类和要选择一个单一的一个，这是我看不到你与你的网站做的，所以不是：

li.menu 
ul.sub_menu 
ul.sub_sub_menu 

只使用类作为一个选择：

.menu 
.sub_menu 
.sub_sub_menu 

这种做法在现代浏览器中渲染速度更快，而且在许多方面更清晰。

然后你走了！它现在应该都很好地工作。