CSS Drop Down Menu problem

[_christine_]

Hi I'd really appreciate any help that you can offer on the following problem.

I'm currently working on our site redesign and as part of this am implementing a css based drop down menu system that uses nested ul's and very minimal javascript (in fact only a small ie hack is in javascript). Its all looking very nice, and practically does everything I want.

There is one small problem (isn't there always), that I'm sure someone can help me with. The main level of navigation is an image based rollover, and when you roll over it, it changes to the hover state and the drop down is triggered. But as you go down the drop down menu to the sub links, you are hovering away from the image and the hover state stops. What I would like is for that main level to stay in the hover state as you peruse the lower level sub menu. I hope that makes sense, I have put a pared down copy from the test site up onto our live site so that you may see what I am talking about.

You can view it here: http://reiwa.com.au/newlayout/new-layout.cfm

Many thanks (in advance!)
Christine

[glenngv]

Ultimate Drop Down Menu (http://udm4.com/) by Brothercake does that.

[ronaldb66]

Since the link you gave returns a 404 I haven't been able to see the markup you used, but when nested lists are applied, the hover state of the top level menu item should be preserved when hovering over the--decendant--sub menu.

UDM is a full-featured solution with some nifty DHTML to make it more user-friendly (like delays that keep the sub menus visible for a moment when you happen to accidentally mouse out of them), but if you're looking for a pure CSS approach, you may find some useful info in ALA's Suckerfish Dropdowns (http://www.alistapart.com/articles/dropdowns/).

[_christine_]

Hi thanks for the replies, I'm not sure why it gave a 404 error it's working fine for me. I thought maybe if I post some code snippets I could get better help on this.

The html looks like this:


<div id="hdr_nav">
<ul id="nav">
<li id="home"><a id="current" href="#"></a></li>
<li id="buying">
<a href="#"></a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
<li id="news">
<a href="#"></a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
<li id="research">
<a href="#"></a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
<li id="people">
<a href="#"></a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
<li id="info"><a href="#"></a></li>
<li id="jobs"><a href="#"></a></li>
<li id="about"><a href="#"></a></li>
</ul>
</div>


and the css looks like this:


#hdr_nav
{
margin: 0 0 0 11px;
padding: 0px;
width: 700px;
height: 34px;
background: url('../images/nav/nav_bg.png') no-repeat;
position: relative;
top: 0;
left: 0;
}
#nav
{
margin: 0;
padding: 0;
width: 700px;
height: 34px;
position: relative;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a
{
display: block;
width: 85px;
height: 34px;
text-decoration: none;
font-size: 1px;
text-indent: 0px;
color: #ffffff;
}
#nav li
{
float: left;
width: 85px;
list-style: none;
padding: 0;
margin: 0;
}

#nav li ul {
margin-left: 1px;
position: absolute;
width: 182px;
left: -999em;
background: #44889b;
z-index: 100000;
}

#nav li ul li {
float: none;
}
#nav li ul a {
width: 182px;
left: -999em;
height: auto;
font: 11px verdana;
text-indent: 5px;
padding: 2px 0;
color: #fff;
background: #44889b;
}
#nav li ul a:hover {
color: #f1efec;
background: #003b59;
}
#nav li ul a.last {
padding-bottom: 10px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
background: #fff;
z-index: 1000;
position: absolute;
}
.sfhover {
z-index: 1000 !important;
}

/* Specific hover ids for "Public Nav Menu" elements */
#home a:hover, #home a:active, #home a:focus, #home a:link#current, #home a:visited#current { background: transparent url('../images/nav/nav_bg.png') 0px -34px no-repeat; }
#buying a:hover, #buying a:active, #buying a:focus, #buying a:link#current, #buying a:visited#current { background: transparent url('../images/nav/nav_bg.png') -85px -34px no-repeat; }
#news a:hover, #news a:active, #news a:focus, #news a:link#current, #news a:visited#current{ background: transparent url('../images/nav/nav_bg.png') -170px -34px no-repeat; }
#research a:hover, #research a:active, #research a:focus, #research a:link#current, #research a:visited#current { background: transparent url('../images/nav/nav_bg.png') -255px -34px no-repeat; }
#people a:hover, #people a:active, #people a:focus, #people a:link#current, #people a:visited#current { background: transparent url('../images/nav/nav_bg.png') -340px -34px no-repeat; }
#info a:hover, #info a:active, #info a:focus, #info a:link#current, #info a:visited#current { background: transparent url('../images/nav/nav_bg.png') -425px -34px no-repeat; }
#jobs a:hover, #jobs a:active, #jobs a:focus, #jobs a:link#current, #jobs a:visited#current { background: transparent url('../images/nav/nav_bg.png') -510px -34px no-repeat; }
#about a:hover, #about a:active, #about a:focus, #about a:link#current, #about a:visited#current { background: transparent url('../images/nav/nav_bg.png') -595px -34px no-repeat; }


I've posted all the nav css, sorry if that too much to post..

Also I don't know if I explained my problem very well, but the link at http://reiwa.com.au/newlayout/new-layout.cfm should be working now and it ilustrates it easier than i can explain it..

Thanks again
Christine

[ronaldb66]

Okay, the page shows up now.

Again, give ul#nav auto left and right margins, and a set width enough to hold the main menu items and things should center nicely.

As a backup for older IE versions, you can add "text-align: center;" to div#hdr_nav and neutralize it again with "text-align: left;" on ul#nav.


Okay, this was an answer to the wrong thread; please ignore it, I am an idiot.

[_christine_]

Hi ronaldb66, thanks for taking the time to look and reply again. But I'm not trying to centre anything, the menu looks as I want it to, the problem is in the image (the top level menu items) not staying in the hover mode when you mouse off it into the sub lists...

Does that make sense???

Thanks
Christine

[ronaldb66]

Riiiiight... this time the right answer:

You've specified hovers for the main menu items on the links (a); these will be lost when you move the mouse out of them to enter the sub menus.
The trick is to specify these hovers on the list items that hold the links: these hover states will be kept because hovering over a positioned sub menu is still in a way hovering over the original list item (the sub menu's parent).

[_christine_]

Awesome! That makes sense! I thought it was only something little.. I will try that tomorrow at work and fingers crossed it will be problem solved!!

Cheers again for taking the time to help :)

Christine