CODEWITHSUNDEEP
htmlcssdrop-down-menumenu
user2238415
user2238415

Reputation: 67

Navigation bar drop down boxes formatting issue css

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.

Upvotes: 0

Views: 329

Answers (3)

fletch
fletch

Reputation: 1641

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

Upvotes: 1

isherwood
isherwood

Reputation: 61114

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

Upvotes: 0

darwin
darwin

Reputation: 240

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/

Upvotes: 0

Related Questions