2 Layer Horizontal menu problem

Get Started
1

Begining to create an 2 Layer Horizontal menu.
Can some one have a idea on whats missing here.

  1. It’s not working properly in Internet Explorer 7.
  2. I need to maintain a a certain gap between the parent and child menu, while hovering from the parent to the child, when the mouse reaches the gap, the child menu disappears, unless the mouse is moved really fast & that seems unreasonable. I know by not having the gap the problem could be fixed, but is there a solution to this.

Here is the HTML

<div id="Nav">
    <ul>
        <li><a href="#">Home 1</a></li>
        <li><a href="#">Home 2</a></li>
        <li><a href="#">Home 3</a>
           <ul>	
                <li><a href="#">Sub 1</a></li> 
                <li><a href="#">Sub 2</a></li> 
                <li><a href="#">Sub 3</a></li> 
           </ul>  
        </li>
        <li><a href="#" >Home 4</a></li>
    </ul>	
</div>

Here is the Css

<style type=“text/css”>

#Nav  ul
{
	margin-top:10em;
	list-style:none;
}

#Nav ul li 
{
    float:left;
    position:relative;
display:inline;
    
padding:0.5em;
	border:solid red 1px;
}

#Nav ul li ul 
{
    position:absolute;    	
    display:none;
    
	margin-top:1.5em;
	margin-left:-3em;
}

#Nav ul li ul li
{
	
}

#Nav ul li a 
{
	text-decoration:none;
    width:6em;
    text-align:center;
}

#Nav ul li a:hover
{
	text-decoration:none;
	width:6em;
	text-align:center;
}

#Nav li:hover ul {display:block;}
#Nav li.over ul {display:block;}

</style>

Im just begining on css , so any improvement suggestions are welcome.
Here I thought, display:inline is what makes the child menu go vertical or horizontal but here it looks like position:relative attribute of #Nav ul li
makes it change. any one know how does that works.

Thanks.

2

The menu was not working in IE because it does not support LI:hover

You did not say you were testing on IE6. IE7 supports li:hover just fine. All browsers do except IE6. The Sons of Suckerfish dropdown uses 12 lines of Javascript to help IE6 do what it cannot— this has nothing to do with Active X (I believe if you get this message, it’s because you’re looking at the file locally. Upload to a server and try again). Alternatively you can add Peterned’s .htc file (which is basically a special type of Javascript file just for IE) found here:
[noparse]http://www.xs4all.nl/~peterned/csshover.html[/noparse] I tend to use this one as it also has a fix for :focus as well.

Faced more problems while changing the background color on a:hover. It looks like the background is being considered only for the anchor block. & the anchor block doesn’t fills the entire list.

Background of who on hover? You’re technically only hovering on anchors, and you can’t say something like
“when I hover on the anchor, make its parent change colour”
because CSS does not do parent selectors or walk UP the DOM.

You could set the background-changing on the element who is taking up the space, but this can become confusing to the user, who may believe everything that changes colour is clickable, which wouldn’t be true.

Got the menu almost redone using javascript entirely (onmouseover & onmouseout). Setting the timeout helps to maintain the gap as well.

Setting a brief mouse-off timeout is a good idea for those with shaky mice anyway. But wherever you have onmouseover and onmouseout, pls add onfocus/blur on the anchors for keyboarders. Otherwise you are making the worst type of JS dropdown: the kind that tells mobile users, laptop users, and everyone without a mouse that they suck and don’t deserve access to your menu… though if the top-level links actually go to a page with all the links available in the submenu, that can make the menu still usable for everyone (whether they have Javascript on or not, whether they use a mouse or not).

Because when I built my menus I was taking care of IE6, I did this, since I could not guarantee that all IE6 users visiting would have Javascript enabled (they may turn it off because their browser is such a security risk), so they could still always click on the main-level links and get through the rest of the site.

People who do get the dropdowns appearing are very unlikely to click on those top-level links, so they wouldn’t see the redundant pages.

So I think that is a good idea you should consider (even if you later build your menu all CSS. Redundant links are still good).

Good luck.

3

If you need a gap, then the gap cannot be between two elements (since as you see the submenu only stays onscreen so long as :hover state continues). But I’ve seen people do this:

they’ve added padding to the top of the sub ul and the sub ul has no border or background colour (instead, the sub ul’s li’s or anchors may hold a background), which makes a strip of “invisibility” between top and bottom menus but actually, there’s an element there so :hover is not broken.

And I’ve seen people do it the other way around: padding on the anchors. This is trickier cause usually people are styling the anchors.
I’ve also seen people use transparent background images but that seems a waste of bandwidth.

Im just begining on css , so any improvement suggestions are welcome.

I’ll start right here with, check out Sons of Suckerfish dropdown menus, because the HTML is solid.

-You don’t need a wrapping div. A ul is a block like a div is a block. Moving the id of “Nav” to the ul itself also makes your CSS smaller.

I’ll say don’t use display: none/block. You’re already absolutely positioning the submenu, so instead of changing its state, just pull it off screen with a negative margin or left: -negative number (see HTMLdog page).

Here I thought, display:inline is what makes the child menu go vertical or horizontal but here it looks like position:relative attribute of #Nav ul li
makes it change.

No. Display: inline would have made the li’s inline, but in this case it’s the float: left that’s doing it. Adding “display: inline” to a float is a popular method of stopping IE6 from doubling any sidemargins the li’s may have (so if there aren’t any sidemargins, you don’t need it anyway).

The position: relative isn’t actually being used for positioning: it’s setting the li’s as “positioned ancestors” (no longer static blocks) so that the abso-po’d submenus have a reference. So each submenu is positioned relative to its parent li… otherwise they would try to be positioned relative to the viewport or whoever is the positioned ancestor if there is one… meaning your submenus would all be stacked up on top of each other in the upper-left corner of your web page… not what you want.

I’d say it’s easier to wrap your mind around dropdown menus after you have more general css knowledge, but that’s not a must. Just know it’ll be a while before you feel you get dropdowns. They took me a while.

Oh, and welcome to Sitepoint.

4

Thanks Stomme poes for your reply.

The menu was not working in IE because it does not support LI:hover
changing to this #Nav li a:hover ul {display:block;} doesn’t helps
Suckerfish dropdown & A list apart have articles showing to make it work in explorer but those load an activeX object message.

Faced more problems while changing the background color on a:hover. It looks like the background is being considered only for the anchor block. & the anchor block doesn’t fills the entire list.

Got the menu almost redone using javascript entirely (onmouseover & onmouseout). Setting the timeout helps to maintain the gap as well.
If i get time , ill try to redo with css.