Css display submenu on menu item hover - html

Question

I have a menu where each menu item has a background image, when hovering over a menu item it is underlined by scrolling up the corresponding background image. Now I also want to display the submenu(with text items, no background image), but the submenu text isn't diplayed , if I set the border of the submenu I can see a rectangle with no proper content. I don't see what's wrong with the code, please help me correct (and improve) it.
//html structure
<div id="menu_top">
<ul id="menu">
<li class="home">Home</li>
<li class="menu">Menu
<ul class="submenu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li class="contact">Contacts</li>
<li class="about">About</li>
</ul>
</div>
//css styles
#menu_top
{
margin: 0 auto;
text-align: center;
background: url(../images/nav-bg.jpg) no-repeat 0 0;
height: 150px;
width: 815px;
}
ul#menu
{
list-style: none;
margin: 0;
position: relative;
}
ul#menu li
{
background-position: left top;
background-repeat: no-repeat;
display: block;
text-indent: -9000px;
position: absolute;
outline: none;
}
/*Menu items*/
// all menu items similar to this ...
ul#menu li.menu
{
background-image: url(../images/nav-menu.png);
height: 50px;
width: 116px;
top: 30px;
left: 380px;
}
/* underline menu items*/
ul#menu li:hover
{
background-position: left bottom;
}
#menu >li ul
{
position:absolute;
left:0px;
top:50px;
width:100%;
}
#menu >li ul>li
{
list-style:none;
}
#menu >li:hover > ul
{
display:block;
}

Answer 1

The sub menu items are not being displayed because you have set a text-indent:-9000px for ul#menu li, which means the text indent will apply to all the li items under the ul #menu. To display the sub menu items apply the below styles to the submenu li
#menu >li ul>li
{
list-style:none;
text-indent:0;
position:relative; // this is set to remove position absolute set for ul#menu li
}
OR
#menu .submenu li{
position:relative;
text-indent:0;
}