Dropdown menus are all aligned to left

Question

I created a dropdown menu through CSS but weirdly all the dropdown menus are aligned to left. I am hoping that all the dropdowns would appear and drop under their parent menu.

The HTML is as follows:-

<div id="menu">
        <ul>
          <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages" class="ng-scope selected">
                <a href="" ng-click="goToPage($index)" class="ng-binding">Introduction</a>
                <ul>
                    <!-- ngRepeat: smenu in data.subMenu[$index].list --><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
                        <a href="" ng-click="goToPage($index)" class="ng-binding">Profile</a>

                    </li><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
                        <a href="" ng-click="goToPage($index)" class="ng-binding">Background</a>

                    </li><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
                        <a href="" ng-click="goToPage($index)" class="ng-binding">What is KAM</a>

                    </li>
                </ul>
            </li>
            ...
    </div>

Following is the CSS:-

#menu {
    /*border-bottom:4px seagreen solid;*/
    background-color: #2d394d;

    list-style:none;
}

#menu ul {
    list-style: none;
}

#menu ul li {
    display: inline-block;
    float: none;
    /*width: 20%;*/
}


#menu ul li a{
    font-size: 10pt;
    padding:12px 24px 12px 24px;
    /*border-right:1px white solid;*/
    display:block;
    text-decoration: none;
    text-align: center;
    color:#fff;
    text-transform: uppercase;
}

#menu ul li a:hover{
}

#menu ul li.selected a {
    background-color: #1b86c2;
    color:#fff;
}


/* DropDown Menus */

#menu ul ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#menu ul li ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
    display: block;
}
#nav ul ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#menu li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#menu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#1b86c2;
    text-decoration:underline;
}
#menu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#menu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#333;
}

You can see the Image showing it here (where the picture shows the drop down for "Cases", it should be under the Cases, but it is shifted to left. "Introduction" sub-menu also shows at the same place):-

Answer 1

尝试添加#menu ul li {position: relative;}

Answer 2

Correction:

After looking closer my last answer wasn't quite right. This might not be the best way to fix it. But its a way ( or gets it in the ball park anyways ).

In your CSS do the following:

#menu {
    /*border-bottom:4px seagreen solid;*/
    background-color: #2d394d;
    height:40px;
    list-style:none;
}

#menu ul li ul{
    position:relative;
}

Here is a demo:

http://jsfiddle.net/2mtt8/1/

Answer 3

It is because of left:0 positioning and parent li's position as being static by default. Yo can fix it by marking it relative so that child ul's left:0 will be relative to the parent li.

#menu ul li {
    display: inline-block;
    float: none;
    /*width: 20%;*/
    position:relative; /*Add this*/
}

#menu li:hover ul{ /* Display the dropdown on hover */
     /* Bring back on-screen when needed */
    left:0;
    padding:0; /*Add this if you are not using any reset*/
}

Fiddle

Answer 4

It looks like each of your drop-downs is position absolutely at 0px:

left:0; /* Bring back on-screen when needed */

I suggest positioning each relatively to its parent. You might consider using display:none to hide drop-downs, rather than positioning them off-screen.