Question

I’m trying to design a horizontal menu just using CSS

Please refer to the following
http://jsfiddle.net/aUYca/

The CSS Classes are

1. li.navMenuParent: A Top Level Menu Item
2. li.navMenuActiveParent: A Top Level ACTIVE menu item
3. li.navMenuNode: A Top Level Menu Item that doens’t have child items
4. li.Active: A Child level ACTIVE menu item

I want the menu to always display the child level menu when the parent has a navMenuActiveParent element. (The intial state hover over 2Parent)

.navmenu ul li.navMenuActiveParent > ul
{
display: inline;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}

However i want that submenu hidden when the user hovers over a top level menu item WITHOUT children. (Hover over the HOME menu item)

 .navmenu li.navMenuParent ul
 {
   display: none;  -- I want this applied to ALL <ul> under .navMenu
 }

I want the Submenu to show the correct submenu when the user hovers over a top level menu item WITH children. (Hover over 1Parent)

 .navmenu li.navMenuParent:hover ul, .navmenu li.navMenuParent.hover ul
 {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0;
 }

I can’t seem to get this to work with pure CSS.

Thanks for any help!

Answer 1

The trick is to apply the right effects to the right elements with as little markup as possible.

http://jsfiddle.net/EGNKE/74/

Mind you I didn’t reset most of the stuff because jsFiddle does that for you and I would reccommend a reset css file by default too if you’re not like, a god, at css.

It only dies in quirks mode in IE, but it’s easy to prevent people from viewing your website in quirks mode by keeping to the standards and/or using X-UA-Compatible header (google it).

I trust you can figure the rest out yourself, else let me know 🙂

(oh btw you better be using a shorttag for that background arrow in a menu item background: color url(‘path.jpg’) posx posy repeat;)