CODEWITHSUNDEEP
htmlcsssubmenu
Vighanesh Gursale
Vighanesh Gursale

Reputation: 921

creating submenu in css

I know this question is asked so many times but I'm getting a problem while creating an sub menu in CSS. I'm new to CSS and don't know so much about it but after trying to Google so much I tried an small menu using CSS, everything works fine but only sub menu doesn't comes in stacked way.

Here is my code:

<body>
    <ul>
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
        <li><a href="#">Example 3</a>
            <ul>
                <li><a href="#">Example 4</a></li>
                <li><a href="#">Example 5</a></li>
            </ul>
        </li>
        <li><a href="#">Example 6</a></li>
    </ul>
</body>

CSS

ul
{
    list-style:none;
    padding: 8px 15px;
}
li
{
    float:left;
}
li a
{
    background: #CCC;
    text-decoration:none;
    color:black;
}
li ul
{
    display:none;
    position:absolute;
    padding:0;
    margin:0;
    list-style:none;
    background-color:#999;
}
li:hover > ul
{
    display:block;
}
li ul a
{
    display:block;
}

Here is my JSFiddle link. Please tell me where do I making mistake.

Upvotes: 1

Views: 105

Answers (6)

Kelderic
Kelderic

Reputation: 6687

What's Going On

Your top level lis are floated, which makes sense. If you want the submenu to stack, you just need to get sub lis to float:none.

CODE

Working Fiddle

li ul li {
    float:none;
}

Screenshot

enter image description here

Upvotes: 4

jtfairbank
jtfairbank

Reputation: 2307

Your issue is that the li { float:left; } style is applied to all li elements, including nested ones. You need to override the styles applied to the nested submenu items, with something like ul li ul li { float: none; }.

Finally, it may be better to use classes to apply styles rather than applying them directly to elements. This is the approach that Twitter Bootstrap takes for its navbar. This may look like the following:

<body> <ul class="menu"> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a> <ul class="submenu"> <li><a href="#">Example 4</a></li> <li><a href="#">Example 5</a></li> </ul> </li> <li><a href="#">Example 6</a></li> </ul> </body>

ul.menu > li { float: left; }

In this case the style is applied only to the children of .menu, instead of all li elements. This is super useful if you use lists later on in your page.

Upvotes: 1

AlexPrinceton
AlexPrinceton

Reputation: 1203

Add this to your code

ul ul li {
    float:none;
    display: block;
}

The problem is that at the first time you are setting to the li {float:left} and it effects to the next li in your sub menu. so you only need float:none

Upvotes: 2

Santy
Santy

Reputation: 312

The float property specifies whether or not a box (an element) should float.

DEMO

CSS

li ul li {
    float: none;
}

Upvotes: 0

Bobby5193
Bobby5193

Reputation: 1625

The simplest way to get the items in the submenu to display vertically is to add a class to the submenu and target the li in order to remove the float property with float:none;

Here's an updated fiddle : http://jsfiddle.net/r52sX/2/

I've added the class instead of just scoping for the li elements in order to make this applicable if you have multiple submenu lists

Upvotes: 0

Andrei Terecoasa
Andrei Terecoasa

Reputation: 572

ul li {float:left}
ul li ul li {display:block;clear:both;}

Upvotes: 0

Related Questions