Чисто CSS Дилемма DropDown Меню (Помощь!)

Question

У меня есть раскрывающееся меню Pure CSS в моем div баннера :

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 отображаются как блоки (ранее скрытые).Но здесь у меня следующие проблемы:

1. #lang плавает в левую сторону (так как это как абсолютная позиция, я не могу плавать вправо).

2. Если я расположу его справа (right: 0;), он будет прилипать к окну браузера и не будет двигаться вдоль margin: 0 auto;.

3. ЕслиЯ использую положение: относительное в #banner, и делаю вариант 2, это работает, но, поскольку #banner имеет overflow:hidden, li.drop не отображаются полностью.

4. Я пыталсяz-index, но я не уверен, как он может работать в этой ситуации (я назначил z-index: 100; li.drop не работал).

Есть предложения?

Answer 1

Вы пытаетесь переместить #lang вправо? Если это так, используйте эту CSS для #lang:

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

Затем просто настройте «50px» на все, что вы хотите, чтобы переместить div влево или вправо. Дайте мне знать, если это помогает или нет!

Answer 2

попробуйте использовать суб-навигацию в качестве другого ul внутри li

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