Child menu display problems: menu-current and positioning

[seanie_morris]

Got this fixed by the way (best not to leave an unfinished topic!).

My padding attribute:

Code Select Expand

padding-left: 240px;[

was placed in #nav ul instead of #nav

Silly me!

[seanie_morris]

Hi all,

I have 3 issues I can't crack about my child menus, shown in the pictures attached, and using Multiflex template.

Firstly, this is my overall menu code:

Code Select Expand

#nav {
height: 75px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
#nav ul {
list-style-type: none;
font-size: 110%;
padding-left: 240px;

/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
#nav ul li {float: left; text-align: center; font-weight: normal; width: 95px; height: 75px; vertical-align:top; letter-spacing: .1em;}
#nav ul li a {height: 75px; display: block; color: #96427d; text-decoration: none; background-image: url(img/menu-on.png); background-repeat: no-repeat; background-position: center middle; padding-top: 20px;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {height: 75px; color: #000; text-decoration: none; background-image: url(img/menu-over.png); background-repeat: no-repeat; background-position: center middle;}
#nav li a:active, #nav ul li a.active {height: 75px; border-color: #fff; color: #000}

/* Current page Customisations*/
#nav li.menu-current a {height: 75px; color: #fff; background-image: url(img/menu-over.png); font-weight: 500;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 200px; margin: 0; display: none; text-transform: none; font-size: 90%; border: 0; background-color: #6F6687;}
#nav .menu li ul li {height: 30px; width: 200px; text-align: left; font-weight: normal; margin: 0; padding: 0; vertical-align: middle;}
#nav .menu li ul a {height: 30px; width: 200px; padding: 7px; background-color: #A09DC6; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {height: 30px; color: #4b4c4d; background-color: #666; border: 0; color:#fff; display: block;}

#nav .menu li ul.menu-current a {height: 30px; color: #4b4c4d; background-color: #666; border: 0; color:#fff; display: block;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}


Problem 1 - Positioning is too far right
I don't know why, but my menu positions itself too far to the right instead of inline under the parent ('Services'). I replicated the code from another 2 websites that used the same Multiflex template and they work fine. The view in this photo is when on hover only.


Problem 2 - Active child menus under Services
The photo shows that when I click on Services, the state of the child menu items changes. All of them show a piece of the hover background image on the parent menu.


Problem 3 - child menu-current display problem
As can be seen in this photo, the current page 'End of Life Room' is indicated in the child menu, however, it is part-showing the background image of the parent item. I am aware the the css:

Code Select Expand

#nav li.menu-current a
would apply here (from the parent menu), but I have also tried to manipulate the child item from using variations of:

Code Select Expand

#nav .menu li ul.menu-current a
for trial and (mostly) error, but I have been unsuccessful.


Thanks in advance,

Seanie.