CSS多级下拉不起作用

Question

好的 - 我放弃了！我没有太多的CSS经验，但我正尝试创建一个简单的CSS多级下拉菜单。我几乎有它的工作，但无法弄清楚一件事......当我将鼠标悬停在顶层菜单上时，显示该项目的所有子级菜单（第二个& 3rd）。有人可以告诉我我做错了什么吗？我已经尝试了很多解决方案 - 这就是我所处的位置。任何帮助是极大的赞赏:)

#ddmenu { 
font-size: .9em; 
display: block; 
width: 100%; 
height: 30px; 
margin: 0 auto; 
padding: 0 15px; 
background: #fff; 
border-radius: 2px; 
border: 1px solid rgba(0, 0, 0, 0.15); 
box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); 
cursor: pointer; 
outline: none; 
font-weight: bold; 
color: #8aa8bd; 
z-index: 5000; 
} 

#ddmenu ul { 
z-index: 1000; 
position: absolute; 
top: 25px; 
width: 180px; 
background: #fff; 
display: none; 
margin: 0; 
padding: 7px 0; 
list-style: none; 
border-radius: 3px; 
border: 1px solid rgba(0, 0, 0, 0.2); 
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
} 

#ddmenu li { 
font-size: 0.9em; 
display: block; 
position: relative; 
float: left; 
text-shadow: 1px 1px 0 #fff; 
z-index: 5000; 
line-height: 30px; 
color: #6c87c0; 
padding: 0 10px; 
white-space: none; 
} 

#ddmenu li a { 
display: block; 
float: left; 
font-weight: bold; 
text-decoration: none; 
-webkit-transition: all 0.2s linear; 
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear; 
transition: all 0.2s linear; 
} 

#ddmenu li:hover > a { 
color: #7180a0; 
background: #d9e2ee; 
} 

/* level 3+ list */ 
#ddmenu ul ul { 
left: 180px; 
top: -3px; 
} 

HTML是：

<ul id="ddmenu"> 
    <li><a href="javascript: void(0);">Home</a> 
     <ul> 
     <li><a href="javascript: void(0);">New</A></LI> 
     <li><a href="javascript: void(0);">Show All</A></LI> 
     </ul> 
    </LI> 
    <LI><a href="javascript: void(0);">Layers</a> 
     <ul> 

      <li><A HREF="javascript: void(0);">Trans 1</A> 
      <UL>    
       <li><A HREF="javascript: void(0);">sub one</A></LI>    
       <li><A HREF="javascript: void(0);">sub two</A></LI>    
       <li><A HREF="javascript: void(0);">sub three</A></LI>    
      </UL> 
      </li> 

      <li><A HREF="javascript: void(0);">Trans 2</A> 
      <UL>    
       <li><A HREF="javascript: void(0);">sub one</A></LI>   
      </UL> 
      </li> 
     </ul> 
    </LI> 
</ul> 

Answer 1

假设你正在寻找一个纯CSS菜单（不很确定你正在尝试与所有javascript: void(0);，但如果做你的只是测试设置#是少输入），它似乎缺少如何显示的东西。即无处可见我的:hover { display: block;}（或没有其他东西）。为了让自己更简单，我倾向于使用CSS来让菜单先运行，然后使其看起来更好（包括转换）。所以我条纹码右后卫，只是正确地显示菜单，我将离开使它看起来更好取决于你所需要的CSS，但是这大致就是我平时做的：

#ddmenu li { 
    list-style-type: none; 
    position: relative;    
} 

#ddmenu > li { 
    display: inline; 
} 

#ddmenu ul { 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    display: none; 
} 

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

#ddmenu ul li ul { 
    top: 0; 
    left: 100%;    
} 

和HTML：

<ul id="ddmenu"> 
    <li> 
     <a href="#">Home</a> 
     <ul> 
      <li><a href="#">New</a></li> 
      <li><a href="#">Show All</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#" class="layerhomelink">Layers</a> 
     <ul> 

      <li> 
       <a href="#"> 
        Trans 1 
       </a> 
       <ul> 
        <li><a href="#">sub one</a></li> 
        <li><a href="#">sub two</a></li> 
        <li><a href="#">sub three</a></li> 
       </ul> 
      </li> 

      <li> 
       <a href="#"> 
        Trans 2 
       </a> 
       <ul> 
        <li><a href="#">sub one</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

的宽度也可以根据需要进行调整，根据你want.This应该在大多数的浏览器，包括回IE 8

所以下一步精细，放回造型（的使它看起来更好点），我分为以下内容：

#ddmenu a { 
     padding: .5em; 
     font-weight: bold; 
     text-decoration: none; 
     -webkit-transition: all 0.2s linear; 
     -moz-transition: all 0.2s linear; 
     -o-transition: all 0.2s linear; 
     transition: all 0.2s linear; 
    } 

    #ddmenu { 
     font-size: .9em; 
     height: 30px; 
     margin: 0 auto; 
     padding: 0 15px; 
     background: #fff; 
     border-radius: 2px; 
     border: 1px solid rgba(0, 0, 0, 0.15); 
     box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); 
     cursor: pointer; 
     outline: none; 
     font-weight: bold; 
     color: #8aa8bd; 
    } 

     #ddmenu ul { 
      width: 180px; 
      background: #fff; 
      margin: 0; 
      padding: 7px 0; 
      border-radius: 3px; 
      border: 1px solid rgba(0, 0, 0, 0.2); 
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
     } 

     #ddmenu li { 
      font-size: 0.9em; 
      text-shadow: 1px 1px 0 #fff; 
      line-height: 30px; 
      color: #6c87c0; 
      padding: 0 10px; 
      white-space: nowrap; 
     } 

      #ddmenu li li a { 
       display: block;    
      } 

      #ddmenu li:hover > a { 
       color: #7180a0; 
       background: #d9e2ee; 
      } 

都应该是好的。最终，我通常会将CSS组合起来，但有时甚至在不同的CSS文件中将它们保持分离（FORM和FUNCTION）更清晰，以便您可以重新设置菜单的主题，而不会破坏其功能。

我发现试图做一个CSS菜单与浮动和定位是倍增和混乱。这纯粹是使用定位，父元素是相对位置的，除了允许您将其子元素完全放置在其中之外，它本质上没有任何作用。我使用百分比宽度，因为这会正确地定位子菜单，无论宽度和字体/像素大小如何，因此您不会对像素进行细微的战争。但请注意，将边距或填充放在错误的位置可能会改变菜单，因此可能需要随时调整。我会一步一步（像一次一个样式规则），并且在所有浏览器中测试你已经改变了什么，以确保你不会无意中改变菜单的行为。

反正希望帮助

Answer 2

速战速决的第一个下拉水平将是：

只需添加一个

#ddmenu li:hover ul{ 
    display: block; 
} 

但我建议你从头开始构建它，第一个HTML结构，然后CSS，没有任何效果（边框等）。