creating submenu in css

Question

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.

so do you want the submenu items to be displayed vertically ? — Bobby5193
– Bobby5193, Commented Apr 15, 2014 at 13:29

Kelderic · Accepted Answer · 2014-06-18 15:37:48Z

4

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

edited Jun 18, 2014 at 15:37

answered Apr 15, 2014 at 13:32

Kelderic

6,7269 gold badges49 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AlexPrinceton · Accepted Answer · 2014-04-15 13:33:52Z

2

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

answered Apr 15, 2014 at 13:33

AlexPrinceton

1,20310 silver badges12 bronze badges

Comments

jtfairbank · Accepted Answer · 2014-04-15 13:37:51Z

1

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.

answered Apr 15, 2014 at 13:37

jtfairbank

2,3072 gold badges23 silver badges33 bronze badges

1 Comment

Kelderic Over a year ago

+1 for answer and going beyond with class idea, and Bootstrap example.

Andrei Terecoasa · Accepted Answer · 2014-04-15 13:32:29Z

0

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

answered Apr 15, 2014 at 13:32

Andrei Terecoasa

5722 gold badges7 silver badges28 bronze badges

Comments

Bobby5193 · Accepted Answer · 2014-04-15 13:33:47Z

0

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

answered Apr 15, 2014 at 13:33

Bobby5193

1,6251 gold badge14 silver badges24 bronze badges

Comments

Santy · Accepted Answer · 2014-04-15 13:33:51Z

0

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

DEMO

CSS

li ul li {
    float: none;
}

answered Apr 15, 2014 at 13:33

Santy

3101 silver badge3 bronze badges

Collectives™ on Stack Overflow

creating submenu in css

6 Answers 6

What's Going On

CODE

Screenshot

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

What's Going On

CODE

Screenshot

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related