andrew67
asked on
parent menu background colour
hi folks i have a drop down menu done in css "i could really learn to hate them" any way this is the url
http://www.nuvaring.aa9/patientsitemap
my problem is when i move my mouse onto one of the sub menu items the main menu background colour reverts back to the on on mouse out action.
the css im using is below
.menu {height:25px; z-index:100;padding-left:1 0px; background-color:#ffe383; }
#nav
{
font-size:75%;
height:25px;
line-height:25px;
width:730px;
float:left;
list-style: none;
}
#nav {
padding: 0;
margin: 0;
}
#nav a {
display: block;
/*width: 140px;*/
color:#000;
text-decoration:none;
/*width:11em;*/
}
#nav a:hover
{
color:#FFF;
background-color:#FBBB37;
}
#nav li {
float: left;
width: 9em;
padding-left:3px;
width:140px;
}
#nav li a:hover
{
color:#FFF;
background-color:#FBBB37;
}
#nav li ul {
position: absolute;
width:128px;
left: -999em;
background-color:#FBBB37;
}
#nav li ul li {
padding:6px;
line-height:15px;
margin-left:0px;
width:128px;
background-color:#FBBB37
}
/*
#nav li ul li a,#nav li ul li a:howver
{
width:140px;
}
*/
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
any help really really aprieciated
http://www.nuvaring.aa9/patientsitemap
my problem is when i move my mouse onto one of the sub menu items the main menu background colour reverts back to the on on mouse out action.
the css im using is below
.menu {height:25px; z-index:100;padding-left:1
#nav
{
font-size:75%;
height:25px;
line-height:25px;
width:730px;
float:left;
list-style: none;
}
#nav {
padding: 0;
margin: 0;
}
#nav a {
display: block;
/*width: 140px;*/
color:#000;
text-decoration:none;
/*width:11em;*/
}
#nav a:hover
{
color:#FFF;
background-color:#FBBB37;
}
#nav li {
float: left;
width: 9em;
padding-left:3px;
width:140px;
}
#nav li a:hover
{
color:#FFF;
background-color:#FBBB37;
}
#nav li ul {
position: absolute;
width:128px;
left: -999em;
background-color:#FBBB37;
}
#nav li ul li {
padding:6px;
line-height:15px;
margin-left:0px;
width:128px;
background-color:#FBBB37
}
/*
#nav li ul li a,#nav li ul li a:howver
{
width:140px;
}
*/
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
any help really really aprieciated
Your link isn't working, but what you are experiencing is default behavior. If you want the parent to maintain the "mouseover" aka :hover style while you're browsing the submenu, you'll need some custom javascript to go along with your CSS.
ASKER
your right the link is the wrong one this one works
http://nrd.anytimeafter9.co.uk/patientsitemap
however your answer isnt really what i wanted to hear
http://nrd.anytimeafter9.co.uk/patientsitemap
however your answer isnt really what i wanted to hear
*shrug* It's still the right one :) :hover is very basic. You need more functionality than it provides.
ASKER
any more clues than that???
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
i have a function to get the drop downs to work in ie6 any idea how i can get the top menu bg to stay coloured in ie6???
ASKER
sorry this is the function
sfHover = function() {
var sfEls = document.getElementById("n av").getEl ementsByTa gName("LI" );
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct ion() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi on() {
this.className=this.classN ame.replac e(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload ", sfHover);
sfHover = function() {
var sfEls = document.getElementById("n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
if (window.attachEvent) window.attachEvent("onload
Afraid I can't see a way to do it. The parent li would need an explicit ID first, otherwise you'd be setting all the parents at the same time. But I can't think of a way to walk up the tree... maybe I'm just tired. I hope someone else sees this that can help.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hi all sorry for the delay getting back, ive actually found a really good solution here
http://www.cssplay.co.uk/menus/dd_valid.html
just use a different menu simpler and one that works
thanks for all your help
http://www.cssplay.co.uk/menus/dd_valid.html
just use a different menu simpler and one that works
thanks for all your help