How to stylize second level dropdown menu list

Tags: html,css,drop-down-menu,styles

Problem :

I made a drop down menu, which works fine for top level items. But I dunno what CSS to add for second level menu items, to be move them to the right side of the hovered item.

Here is my HTML content:

<ul class="menu">
<li><a href="#" >item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a>
    <ul>
        <li><a href="#">subitem1</a></li>
        <li><a href="#">subitem2</a></li>
        <li><a href="#">subitem3</a>
            <ul>
                <li><a href="#">subsubitem1</a></li>
                <li><a href="#">subsubitem2</a></li>
            </ul>
        </li>
        <li><a href="#">subitem4</a></li>
        <li><a href="#">subitem5</a></li>

    </ul>
</li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>

and my actual CSS:

.menu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
}

.menu ul {
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu li {
    float:left;
    padding:0px;
}

.menu li a {
    background:#333333 url("seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
    background: #2580a2 url("hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}

.menu li ul {
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}

.menu li:hover ul {
    display:block;
}

.menu li li {
    background:url('sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}

.menu li:hover li a {
    background:none;
}

.menu li ul a {
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
    background:#2580a2 url('hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}

jsfiddle

I'm trying to do a submenu of a submenu of a list menu and told that this may work but i dont know how to add it to css. and weather or not the styles would apply to it if its put into css.

[SOLVED] Okay, so i managed to solve this ( and now I just have to style widths and hovers ). What I Did was chuck in the css from the answer below, added in this css aswell

.tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

For some reason it was set to { overflow:hidden ; } (wtf!) so i changed that and it seemed to overflow correctly now.

In the menu html, I changed

<ul>
    <li><a href="#" >item1</a></li>
    ....
</ul>

to

<ul class="menu_top">
    <li><a href="#" >item1</a></li>
    ....
</ul>

on line one of the given html. Now all that I need to do is style {width:225px; } and change the :hover element, thanks for everyones help!

---

Solution :

You can use the following CSS:

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0px;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content:"\00A0\00A0\25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
    margin:0;
    padding:0;
}

It's taken from my old question. The .menu_top class is used only for distinguishing between the navigation menu and another unordered lists.

JSFiddle code & result page