CSS Dropdown not working on hover

Question

I am trying to implement a pure CSS menu on hover. Everything works except that when hide the menu and try to show it on hover...it doesnt happen.

Here is my HTML:

         <ul id="nav-menu">
            <li><a href="#" class="first" id="p-menu">A</a></li>
                <ul class="submenu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#" class="last">H</a></li>
        </ul>

And My CSS:

  #nav-menu {
   position: relative;
     }

       #header .submenu {
        width: 158px;
            height: 133px;
background: url(../images/submenu-bg.png) no-repeat;
position: absolute;
top: 49px; left: -11px;
display: none;

}

            #header .submenu li a {
display: block;
margin: 10px 66px 5px 20px;
border: 0 none;

}

        #header .submenu li a:hover {
display: block;
margin: 10px 66px 3px 20px;
border: 0 none;

}

           #nav-menu #p-menu:hover ul.submenu {
display: block!important;

}

Any help would be highly appreciated.

Hey you can check this stackoverflow.com/questions/9971833/… — Rohit Azad Malik
– Rohit Azad Malik, Commented Apr 11, 2012 at 10:19

sandeep · Accepted Answer · 2012-04-11 11:02:43Z

1

Write like this:

<li id="p-menu">
 <a href="#" class="first">A</a>
   <ul class="submenu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
   </ul>
</li>

edited Apr 11, 2012 at 11:02

answered Apr 11, 2012 at 10:19

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

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

Comments

Curtis · Accepted Answer · 2012-04-11 10:19:55Z

0

Your sub menu ul should be nested within your li, not after it. Otherwise this is invalid HTML. Also you should put your p-menu id on the li instead of the a.

Change:

<li><a href="#" class="first" id="p-menu">A</a></li>
<ul class="submenu">
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
</ul>

To:

<li id="p-menu"><a href="#" class="first">A</a>
   <ul class="submenu">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
   </ul>
</li>

-- SEE EXAMPLE --

answered Apr 11, 2012 at 10:19

Curtis

104k69 gold badges280 silver badges359 bronze badges

2 Comments

Curtis Over a year ago

@sandeep Sorry I don't understand?

sandeep Over a year ago

Sorry, i didn't saw you put id="p-menu" in LI

SG 86 · Accepted Answer · 2012-04-11 10:20:19Z

0

Your <ul> submenu is outside the <li> tag

answered Apr 11, 2012 at 10:20

SG 86

7,0983 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

CSS Dropdown not working on hover

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related