Search code examples
htmlcsssubmenu

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.

Solution

  • 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