I have made some changes to a pre-made template, but I'm having some problems with the menu.
The existing menu is css (html only), horisontal, i 2 levels. Level 2 is vertical.
But my client vants 3 levels.
And I just can't get it to work properly.
When a menu-item in the 3. level has been selected, it changes place when hovering the menu once more.
I wold like for the menu items in level 3 to be visible when active (when hovering the menu), and stay in it's place, to the right of it's parent menu-item in level 2.
I've tried so many different thing, but I just can't figure it out.
I've also tried to set the menu over again, in another way that I know will work the way it's supposed to.
But then I can't get it to be a "dynamic menu" in BC
Can anybody help me?
And here's the css:
/* Main Navigation
---------------------------------------------------------------------- ------------------------------*/
#nav {
clear:both;
display:inline;
float: left;
width:100%;
margin:14px 0 0 10px;
background:transparent url(images/nav-bg3.png) repeat-x left top;
}
#nav ul {
background: url(images/topNavDivider.png) no-repeat scroll right top;
display:inline-block;
margin:0px;
padding: 0;
}
#nav ul li, #nav ul li.selected {
background: url(images/topNavDivider.png) no-repeat scroll 0 0;
display:inline;
float: left;
margin: 0;
padding:0 0px 0 0;
position:relative;
}
#nav ul li a {
color: #fff;
display: block;
font-size:12px;
padding: 18px 10px 24px;
text-decoration: none;
}
#nav ul li a:active, #nav ul li a:hover, #nav ul li.selected a {
background:transparent url(images/nav-active-bg3.png) repeat-x left top;
color: #fff;
}
#nav ul li ul {
background:url(images/subnav-bg2.png);
left: -999em;
position: absolute;
width: 14.5em;
z-index:999;
top:43px;
box-shadow:0 1px 4px #3A3A3A;
}
#nav ul li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav ul li ul li {
border-bottom:1px solid #a4bed1;
display:block;
float:none;
clear:left;
}
#nav ul li ul li.selected {
float:none;
}
#nav ul li.selected ul li a:link, #nav ul li.selected ul li a:visited {
background:none;
}
#nav ul li.selected ul li a:active, #nav ul li.selected ul li a:hover {
background:url(images/subnav-active-bg2.png);
color: #f9f9f9;
}
#nav ul li ul li.selected a:link, #nav ul li ul li.selected a:visited {
background:url(images/subnav-active-bg2.png);
color:#f9f9f9;
}
#nav ul li ul li a:link, #nav ul li ul li a:visited {
color: #fff;
display: block;
font-size: 11px;
padding: 12px 10px;
text-decoration: none;
}
#nav ul li ul li a:hover, #nav ul li ul li a:active {
background:url(images/subnav-active-bg2.png);
color: #f9f9f9;
}
/* nav level 3
---------------------------------------------------------------------- ------------------------------*/
#nav ul li ul li ul {
background:url(images/subnav-bg2.png);
margin-left: 100%;
display:none;
list-style:none;
position: absolute;
width: 14.5em;
z-index:999;
top:0px;
box-shadow:0 1px 4px #3A3A3A;
}
#nav ul li ul li:hover ul, #nav ul li ul.sfhover li {
display:block;
}
#nav ul li ul li ul li.selected {
float:right;
display:block;
}
#nav ul li ul li ul li a:link, #nav ul li ul li ul li a:visited {
background:url(images/subnav-bg2.png);
color: #fff;
}
#nav ul li ul li ul li:hover a, #nav ul li ul li ul li a:hover, #nav ul li ul li ul li a:active {
background:url(images/subnav-active-bg2.png);
color: #f9f9f9;
}