Hi all,
I hope someone can please help me!
I have 99% complete my CSS dropdown menu based upon the suckerfish bare bones layout which has been personalised.
Basically, the problem I am having is that when I move onto the top level button the background image changes as planned. When I then move down to the sub level of the menu, the background of the top level button changes back when I want it to stay in the hovered state.
I have been messing about with this for hours and can't get it to work, any help would be greatly appreciated.
Here is a snippet of the code:
HTML.
<div class="secondarymenu">
<ul id="sec_menu">
<li class="sec_menu_top"><a href="#">CABIN SEALING</a>
<ul>
<li class="sec_menu_child"><a href="#">Why Seal a Cabin?</a></li>
<li class="sec_menu_child"><a href="#">Testing Cabin Sealing</a></li>
<li class="sec_menu_child"><a href="#">Cabin Sealing Kits</a></li>
<li class="sec_menu_child"><a href="#">Specialist Parts</a></li>
<li class="sec_menu_child"><a href="#">FAQ & Ask an Expert</a></li>
</ul>
</li>
<li class="sec_menu_top2"><a href="#">CABIN<br/>PRESSURISATION</a>
<ul>
<li class="sec_menu_child"><a href="#">Why Pressurise a Cabin?</a></li>
<li class="sec_menu_child"><a href="#">Testing Cabin Pressurisation</a></li>
<li class="sec_menu_child"><a href="#">Cabin Pressurisers</a></li>
<li class="sec_menu_child"><a href="#">Pressuriser Assemblies</a></li>
<li class="sec_menu_child"><a href="#">Blower Options</a></li>
<li class="sec_menu_child"><a href="#">Canister Options</a></li>
<li class="sec_menu_child"><a href="#">Precleaner Options</a></li>
<li class="sec_menu_child"><a href="#">Filter Options</a></li>
<li class="sec_menu_child"><a href="#">Ducting Options</a></li>
<li class="sec_menu_child"><a href="#">Custom Install Kits</a></li>
<li class="sec_menu_child"><a href="#">FAQ & Ask an Expert</a></li>
</ul>
</li>
</ul>
CSS.
#sec_menu, #sec_menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#sec_menu a {
display: block;
}
#sec_menu li {
float: left;
}
#sec_menu li ul {
border-top: 1px solid #fff;
position: absolute;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
width: 200px; /* match width with the sec menu child */
}
#sec_menu li:hover ul, #sec_menu li.sfhover ul {
left: auto;
}
/* .nav li#homeat a:link, .nav li#homeat a:visited, .nav li#homeat a:active { */
.sec_menu_top a:link, .sec_menu_top a:visited, .sec_menu_top a:active {
font-family: Arial, Verdana, Tahoma;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #141414;
width: 106px; /* Set the width of the parent menu link */
height: 27px;
padding: 13px 0 0 0;
background: url("tracs_graphics/sec_menu_top.png") no-repeat;
}
.sec_menu_top2 a:link, .sec_menu_top2 a:visited, .sec_menu_top2 a:active {
font-family: Arial, Verdana, Tahoma;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #141414;
width: 106px; /* Set the width of the parent menu link */
height: 34px;
padding: 6px 0 0 0;
background: url("tracs_graphics/sec_menu_top.png") no-repeat;
}
.sec_menu_top a:hover, .sec_menu_top2 a:hover {
background: url("tracs_graphics/sec_menu_top_hov.png") repeat-x;
color: #ffffff;
}
.sec_menu_child a:link, .sec_menu_child a:visited, .sec_menu_child a:active {
font-family: Verdana, Tahoma, Arial;
font-size: 10px;
font-weight: normal;
text-align: left;
text-decoration: none;
color: #121212;
width: 195px; /* Set the width of the child menu link */
height: 22px;
padding: 8px 0 0 5px;
background: url("tracs_graphics/sec_menu_child.png") repeat-x;
/* USE THIS CODE TO OFFSET THE RIGHT HAND MENU TO MAKE LARGER
position: relative;
left: -20px; */
}
.sec_menu_child a:hover {
background: url("tracs_graphics/sec_menu_child_hov.png") repeat-x;
}
Thanks for your time all,
Best regards,
Foxhole
