Css display submenu on menu item hover

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"><a href="#" class="home">Home</a></li>
                <li class="menu"><a href="#" class="menu">Menu</a>
                    <ul class="submenu">
                            <li>item1</li>
                            <li>item2</li>
                            <li>item3</li>
                    </ul>
                </li>
                <li class="contact"><a href="#" class="contact">Contacts</a></li>
                <li class="about"><a href="#" class="about">About</a></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;
}

Please jsfiddle.net

ShibinRagh
– ShibinRagh

2014-03-27 05:27:30 +00:00
Commented Mar 27, 2014 at 5:27 — ShibinRagh
– ShibinRagh, Commented Mar 27, 2014 at 5:27
Are you trying to achieve this jsfiddle.net/WJ876

ShibinRagh
– ShibinRagh

2014-03-27 05:39:58 +00:00
Commented Mar 27, 2014 at 5:39 — ShibinRagh
– ShibinRagh, Commented Mar 27, 2014 at 5:39

James · Accepted Answer · 2014-03-27 05:10:06Z

2

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;
}

edited Mar 27, 2014 at 5:10

answered Mar 27, 2014 at 5:03

James

4,5901 gold badge21 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Css display submenu on menu item hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related