0

I am making a navigation bar and cant seem to figure out why my drop down menu options are stacked side by side instead of one on top of the other. Ive search and tried just about everything. Any suggestions?

http://jsfiddle.net/isherwood/rUsNr/

HTML markup:

<ul class="jsddm">
    <li><a href="home">Home</a>
    <li><a href="#">OS</a>
        <ul>
            <li><a href="#">Android</a></li>
            <li><a href="#">iOS</a></li>
        </ul>
    </li>
    <li><a href="#">Category</a>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
        </ul>
    </li>
    <li><a href="#">Rating</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </li>
    <li><a href="login">Login</a></li>
    <li><a href="register">Register</a></li>
</ul>

css

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 1.5em;

}

ul.jsddm a
    {
    color: #FFF;
    background-color: #333;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
}

ul.jsddm li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

ul.jsddm ul
{
    position: absolute;
    width: 150px;
    top: 25px;
    padding: 0;
    visibility: hidden;
}

I want to keep the width at 16% in ul.jsddm li part of the code (this was the bav bar shrinks for smaller screens.

Improve this question

3 Answers 3

Reset to default
1

I believe your problem is due to the following CSS:

ul.jsddm li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

The rules will apply to all <li>...even the ones that are nested.

Try turning it into:

ul.jsddm > li
{
    position: relative;
    float: left;
    list-style: none;
    width: 16%;
}

You'll probably want to then add something for your nested <li>

ul.jsddm li ul li { list-style:none; }
Improve this answer
4
  • This work perfectly. Thank you! So am I correct in assuming that the ">" operator indicates that the rules should not apply to any of the submenus?
    – user2238415
    Apr 3, 2013 at 2:31
  • Correct, you are saying that only li who are direct children of ul.jsddm should have those properties set. The other list item elements are descendants, but not direct children of the element. Have a look here: meyerweb.com/eric/articles/webrev/200006b.html
    – fletch
    Apr 3, 2013 at 3:32
  • btw, don't forget to mark one of the answers as the accepted answer if you feel it meets your requirements. ;)
    – fletch
    Apr 3, 2013 at 12:51
  • Done. Im new to the site and wasnt aware of the feature. Thanks for the heads up!
    – user2238415
    Apr 3, 2013 at 23:41
0

In order to keep your width of 16% for the ul.jsddm li, you need to do what isherwood said plus:

ul.jsddm > li {
    float: left;
}

ul.jsddm li {
    position: relative;
    list-style: none;
    width: 16%;  
}

http://jsfiddle.net/Gcbrp/

Improve this answer
0

Change

ul.jsddm li {
    float: left;

to 

ul.jsddm > li {
   float: left;

to limit your float statement to the first-level menu items.

http://jsfiddle.net/isherwood/rUsNr/6

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.