Question

我的 banner div ：

中有一个Pure CSS下拉菜单

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中使用position：relative，并执行选项2，则可以正常运行，但由于#banner有overflow:hidden，li.drop未完全显示
我尝试了z-index，但我不确定它在这种情况下是如何工作的（我分配了z-index: 100; li.drop没有用。）
< / LI>
有什么建议吗？

Answer 1

尝试将你的子导航作为li中的另一个ul

<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;}

Answer 2

你想把#lang移到右边吗？如果是这样，请将此css用于#lang：

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

然后，只需将“50px”调整为您要将div向左或向右移动的任何内容。如果这有帮助，请告诉我！

纯CSS DropDown菜单困境（帮助！）

2 个答案: