Pure CSS DropDown Menu Dilemma (Help!)

Question

I have a Pure CSS Dropdown menu in my banner div:

HTML:

<div id="banner">
        <h1><a href="http://widerdesign.co.nr/"&gt;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;
    }

When I hover #lang ul, li.drop are displayed as block (previously hidden). But here I have the following problems:

1. #lang floats to the left side (since it as absolute position I can't float it right).

2. If I position it to the right side (right: 0;) it sticks to the browser's window, and it doesn't move along the margin: 0 auto;.

3. If I use position: relative in #banner, and do the option 2, it works but since #banner has overflow:hidden, li.drop are not completely displayed.

4. I tried z-index but I'm not sure how it can works in this situation (I assigned z-index: 100; to li.drop didn't work).

Any suggestions?

Answer 1

try having your sub-nav as another ul inside the 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>

and the 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

Hi,

Are you trying to move #lang to the right? If so, use this css for #lang:

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

Then, simply adjust "50px" to whatever you want to move the div to the left or right. Let me know if that helps or not!