纯CSS下拉菜单困境（HELP！）

我有一个纯CSS下拉菜单中我横幅DIV：纯CSS下拉菜单困境（HELP！）

HTML：

<div id="banner"> 
     <h1><a href="http://widerdesign.co.nr/">wider design</a></h1> 
     <ul id="lang"> 
      <li><a href="index.php">English</a></li> 
      <li class="drop"><a href="es/index.php">Español</a></li> 
      <li class="drop"><a href="tw/index.php">中文(繁體)</a></li> 
      <li class="drop"><a href="cn/index.php">中文(简体)</a></li> 
     </ul> 
    </div>

CSS：

/* banner */ 
    #banner { 
     border-bottom: 1px solid #DDD; 
     padding: 0 0 15px 0; 
     margin: 30px 0; 
     overflow: hidden; 
     width: 960px; 
    } 
    #lang { 
     padding: 9px 0 0 0; 
     position: absolute; 
    } 
    #lang li.drop { 
     display: none; 
     margin: 0 0 0 20px; 
    } 
    #lang:hover li.drop { 
     display: block; 
    }

当我悬停#lang ul，li.drop显示为块（以前隐藏）。但在这里，我有以下问题：

#lang花车左侧（因为它的绝对位置我不能浮动是正确的）。
如果我将它放在右侧（right: 0;），它会粘在浏览器的窗口上，并且不会沿着margin: 0 auto;移动。
如果我使用的位置是：相对的#banner，并做选项2，它的工作原理，但由于#banner有overflow:hidden，li.drop没有完全显示出来。
我试过z-index，但我不确定它在这种情况下如何工作（我分配了z-index: 100;到li.drop没有工作）。

有什么建议吗？

来源

2010-02-06 alexchenco

纯粹的CSS下降似乎总是尝试一件有趣的事情，但最终在真实项目中毫无用处。任何可以支持足够CSS到纯CSS下拉菜单的浏览器都可以运行JavaScript，并且在更少的代码中执行相同的操作，并且调试起来会更容易。很容易制作出可以回到IE5的Javascript下拉菜单。我不认为在纯CSS中同样容易 – Kibbee 2010-02-06 13:39:13

我不明白这个问题：你的菜单工作正常。你想达到什么目的？ – graphicdivine 2010-02-06 14:36:43

改为使用Javascript。 – Amit 2010-09-05 23:14:36

尝试让你的子导航作为李

<ul id="nav"> 
    <li><a title="" href="#><span>option one</span></a></li> 
    <li class="sub"><a title="" href="#"><span>option two</span></a> 
    <ul class="sub_nav"> 
     <li><a title="" href="#"><span>sub one</span></a></li> 
     <li><a title="" href="#"><span>sub two</span></a></li> 
     <li><a title="" href="#"><span>sub three</span></a></li> 
     <li class="last_sub><a title="" href="#"><span>sub four</span></a></li> 
    </ul>     
    </li> 
</ul>

和CSS

#nav li {display: block; float: left; position: relative;} 
#nav li a span {padding: 10px 25px 10px 25px; border-right: 1px solid #373737; color: #dddddd; font-size: 13px; background: #2a2a2a; float: left; display: block;} 
#nav li a:hover span, #nav li .active span {color: #373737; background: #bcd22c;} 

#nav .sub_nav {display: none; float: left;} 
#nav .sub:hover .sub_nav {display: block; margin: 38px 0 0 0; border: none; cursor: pointer; position: absolute; z-index: 5000; width: 100px;} 
#nav .sub_nav li a span {padding: 10px 10px 10px 26px; line-height: 20px; border-bottom: 1px solid #333333; font-size: 12px; height: 20px; width: 80px; cursor: pointer; margin: 0 !important; border-right: none !important;} 
#nav .sub_nav li a span:hover {} 
#nav .sub_nav .last_sub a span {border: none !important;} 
#nav .sub_nav li span {width: 100px;}

来源

2010-02-06 13:35:24 pixeltocode

内的另一个UL你试图移动#lang向右？如果是的话，使用这个CSS的#lang：

#lang { 
     padding: 9px 0 0 50px; 
     list-style: none; 
     position: absolute; 
    }

然后，只需调整到任何你想要到div移动到左边或右边“50像素”。让我知道如果这有帮助或没有！

来源

2010-09-09 17:03:34 TheLibzter

纯CSS下拉菜单困境（HELP！）

回答

相关问题