How to stylize second level dropdown menu list - html

Question

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>item2</li>
<li>item3
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3
<ul>
<li>subsubitem1</li>
<li>subsubitem2</li>
</ul>
</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</li>
<li>item4</li>
<li>item5</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!

Answer 1

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