3

I am trying to make CSS drop down menu (no javascript involved). According to http://pixelspread.com/blog/289/css-drop-down-menu I only need to add 

#menuBar #test2 a:hover .subMenu{display:block;}

to make the sub menu show up. However, in my code, it doesn't work. Could someone help me about this issue? Thanks a lot!

My html

<ul id="menuBar">
   <li id="test1">test1</li>
   <li id="test2"><a href="#">Pro1</a>
     <div class="subMenu">
        <ul>
           <li><a href="#">sub1</a></li>  
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
         </ul>
         <ul>
            <li><a href="#">Volleyball</a></li>
            <li><a href="#">Walking</a></li>
            <li><a href="#">Water Shoes</a></li>
         </ul>
       </div> <!--end of submenu-->
     </li>
  </ul>

My Css

 #menuBar #test2 a{
background:url("../images/btTest.jpg") no-repeat bottom;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}

#menuBar #test2 a:hover{
background:url("../images/btTest.jpg") no-repeat top;
}

#menuBar #test2 a:hover .subMenu{  
// I add .subMenu after a:hover and have two a:hover for #test2 a
// I know it won't work but not sure what to do now.
//thanks for the help.
display:block;
}


.subMenu{  // the hidden menu
position:absolute;
top:35px;
left:0px;
z-index: 99999;
width:550px;
background-color:black;
display:none;
}
Improve this question
3
  • 2
    Just so you know, that IE6 doesn't support most of the selectors suggested by R.Hill. >,+ is not supported, as well as :hover pseudo-selector is not supported on anything but an a. Commented Jul 22, 2010 at 23:36
  • Pfft, who cares about IE 6, even IE? Commented Jul 24, 2010 at 0:09
  • IE6, Strelok??? Who cares. Unless you're catering to a Chinese population, you probably won't have even 0.5% of your users on IE6. I can't tell you the last time I saw IE6 pop up in any of my website stats. Commented Oct 1, 2012 at 17:38

5 Answers 5

Reset to default
4

Your HTML structure isn't set up to allow multiple sub-menus with a single css statement. If you look at Mcinerney's HTML:

<div id="menu">
  <ul id="item1">
    <li class="top">menu item</li> 
    <li class="item"><a href="#">menu item 1</a></li> 
    <li class="item"><a href="#">menu item 2</a></li> 
    <li class="item"><a href="#">menu item 3</a></li> 
  </ul> 
</div>

and his css:

#menu ul:hover .item{display:block;}

it translates to "If you hover over a "ul" that is a descendant of an element with id, "menu", then find all elements that are descendants of said "ul" with the class, "item" and set their display to "block".

You can do something similar, but you will need to add a line of css for each sub-menu based on the id of the LI element:

#test2:hover div.subMenu { display: block; }

"#test2" refers to any element with an id of "test2".

"div.subMenu" refers to any element (in this case a div) with a class designation of "subMenu". Because it comes after "#test2", the div element must be a descendant of "#test2".

In order to keep your background-image on hover, you'd need to make some changes to the css and html. First, designate a class on the "A" (because we don't want to reference all "A" elements that are children of #test2, just the designated one):

<li id="test2"><a href="#" class="top">Pro1</a> ...

Then modify your css so that the background is set upon the hover over #test2 (not #test2 a):

#test2:hover a.top {
  background:url("../images/btTest.jpg") no-repeat top;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

great work. It fixed my "submenu will disappear when I hover to my submenu " problem Thanks a lot. I wish I can give you both accepted answer.....+1 of course
Your first solution works fine. The updated answer might not work in my case.
BTW, any idea how to keep my test2 a hover background image show up all the time even though I move my mouse to submenu??
My mistake. Your html structure differs from the example you referenced. Are you able to change it?
Sorry for the confusion....fixed it already... I am still trying to figure out how to make my #menu #test2 a background image stays in hover state when I move my mouse to submenu.....:(
|
2

div.subMenu is not a descendant of 'a' tag. Try:

#menuBar #test2 a:hover + .subMenu{  
    display:block;
}

The '+' means 'direct following sibling of'

You will probably need also

.submenu:hover {
    display:block;
}

Or just combine them:

#menuBar > li > a:hover + .subMenu, .submenu:hover {  
    display:block;
}
Improve this answer

5 Comments

Thanks a lot Hill. The sub menu would show up when I hover the test2 a, but it will be gone if I try to hove the submenu even though I add .submenu:hover { display:block; } Any idea what happen?? +1 though..:D
I think it's because .submenu doesn't support :hover state?
You have to ensure that the mouse goes directly from 'a' to 'div' without going anywhere else in between, or that will cause your a tag and div.subMenu to go back to non-hover state, in which case the menu disappear. Looking at the CSS, I have to say I am not sure where your submenu will appear. It should be touching the a tag (margins included)
Thanks again. uhleeka's solution seems fix my problem.
BTW, anyway to keep my test2 hover background-image show up even I move my mouse to my subMenu???
2

Here is a cross-browser CSS only drop down menu, that works in IE6 too. It uses CSS hacks AND conditional HTML markup, but it works!

http://www.cssplay.co.uk/menus/final_drop.html

Improve this answer

1 Comment

Thanks for the link and comment. I will try to fix IE6 problem.
1

There's a good example of CSS-only menus in action at Steve Gibson's site - http://www.grc.com.

Improve this answer

2 Comments

Sorry, should have been more descriptive. Steve's a security researcher and developer. He dislikes javascript, due to the inherent security concerns, and therefore created a CSS-only menu system for his site. I believe there's a series of pages on the site documenting the menu system as well. I've used the site in various versions of IE and firefox with no problems.
JavaScript isn't a security problem. As long as you use a good browser and operating system, such as Firefox on Ubuntu, there shouldn't be a problem.
-1

head on over to my http://collins.class401.com/nav folder, download all the css and gifs and the js's (don't worry, it works without javascript also) and veiw the readme and check out the demo

this is exactly what your looking for

Improve this answer

2 Comments

i'm guessing the troll that voted this down didnt bother to even look at it this works in IE 5+ (even IE5 mac), and the 4 real browsers with or without javaqscript AND i've included support for browsers that CAN'T use :hover so vote it down TROLL
You might want to rethink your attitude. It's greatly appreciated when you try to be helpful here, but the kind of behavior you've been displaying on some of your answers & comments is not something we like to see here. Please take a moment to read the FAQ; also meta.stackoverflow.com offers a lot of information on how this site works. Welcome to Stack Overflow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.