PDA

View Full Version : Resolved CSS Menu ignoring 2nd level classes?



hinch
Jan 19th, 2010, 11:53 AM
I've got a bit of an odd issue (well odd do me at least) with a css based navigation system on one of my sites.

It uses a simple ul/li based navigation system with a 2nd layer drop down on one of the buttons.
Whats happening is that the drop down is inheriting the background image from the main ul/li and ignoring the background styles for the sub levels.

This is the HTML for the menu



<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php?page=catlist">Animals</a></li>
<li><a href="index.php?page=brands">Brands</a></li>
<li><a href="./forum/">Forums</a></li>
<li><a href="index.php?page=products">Products</a></li>
<li><a href="index.php?page=cart">My Cart</a></li>
<li><a href="<?php echo $mylink;?>">Account</a>
<ul>
<li><a href="index.php?page=mywishlist">WishList</a></li>
<li><a href="index.php?page=starpoints">My Star Points</a></li>
<li><a href="index.php?page=tracking">Orders/Tracking</a></li>
<li><a href="index.php?page=changepass">Change Password</a></li>
<li><a href="index.php?page=custnewsletter">Newsletters</a></li>
<li><a href="index.php?page=changeaccountinfo">Account Details</a></li>
<li><a href="index.php?page=custlogout">Logout</a></li>
</ul>
</li>
<li><a href="index.php?page=faq">Faq's</a></li>
<li><a href="index.php?page=aboutus">About Us</a></li>
<?php if(isset($_SESSION['memberid'])) { ?><li><a href="index.php?page=custlogout" class="navigation">LOGOUT</a></li><?php } ?>
</ul>
</div>


and this is the CSS that supposedly "controls" its style :)


/* Main Navigation */
.menu {
width:894px;
height:25px;
position:relative;
z-index:100;
font-family: Tahoma;
background-color:#FFF;
padding-left: 5px;
padding-bottom: 2px;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:894px; w\idth:894px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;;margin:0;list-style-type:none; text-align:center;}
.menu ul ul {width:84px; }
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:84px;position:relative;text-align:center;padding-right: 2px;}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
background-image:url(../images/button_bk.png);
background-repeat: no-repeat;
width:84px;
height:25px;
padding-left:0px;
line-height:25px;
font-weight:bold;
background-color: #FFF;
padding-right: 2px;
color: #FFFFFF;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:90px; w\idth:90px;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background-repeat: no-repeat; color:#ffffff; border-bottom:0px solid #000; border-top:1px solid #000}
/* style the second level hover */
.menu ul ul a.drop:hover{color:#ffffff; background-color: #84c3ff;}
.menu ul ul :hover > a.drop {color:#ffffff;background-color: #84c3ff;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#ffffff;
background-color: #ffffff;
}
/* style the third level hover */
.menu ul ul ul a:hover {
color:#ffffff;
background-color: #fff;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:25px;left:0; width:90px;background-color: #84c3ff; color:#ffffff;}
/* another hack for IE5.5 */
* html .menu ul ul {top:25px;t\op:25px;}
/* position the third level flyout menu */
.menu ul ul ul{left:90px; top:-1px; width:90px;}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-90px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:128px;
background-color: #84c3ff;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background-color: #FFF;
}
.menu :hover > a {
color:#FFF;
background-image:url(../images/greenbutton_bk.png);
background-repeat: no-repeat;
}
.menu ul ul :hover > a {
color:#FFF;
background-color: #6ebc43;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

I've attempted to restyle the drop level using the ".menu ul ul a.drop, .menu ul ul a.drop:visited" class but it seems to ignore anything I put in there in favour of inheriting the ".menu a, .menu a:visited" class.

What am I doing wrong? can you please explain any changes you recommend so I can learn for future.

abduraooft
Jan 19th, 2010, 12:18 PM
Try changing
.menu :hover > a {
color:#FFF;
background-image:url(../images/greenbutton_bk.png);
background-repeat: no-repeat;
}
.menu ul ul :hover > a {
color:#FFF;
background-color: #6ebc43;
} to

.menu li:hover > a {
color:#FFF;
background-image:url(../images/greenbutton_bk.png);
background-repeat: no-repeat;
}
.menu ul ul li:hover > a {
color:#FFF;
background-color: #6ebc43;
}

PS:1) IE6 doesn't recognise the child selector (>), and in fact you don't need it there.
2) You need to opt a suitable background - foreground color combination to make the menu visible even in the absence of background images.

hinch
Jan 19th, 2010, 12:40 PM
ok I've added in the li before the : as suggested it hasn't effected it.

I don't quite understand what you mean by this though

2) You need to opt a suitable background - foreground color combination to make the menu visible even in the absence of background images.

The sub menu popup bits should have a suitable colour selected already as far as I'm aware using this


.menu ul ul a.drop:hover{color:#ffffff; background-color: #84c3ff;}

I've attached a screenshot so you can get a better idea of what its doing. The whole menu works perfectly apart from these silly sub menu drop down bits which as you can see from the attachment is using the background image from the main top level ul>li as the background for the sub menu item when it should only be using a light blue background with no image.

also I don't care about IE6 not supporting the child selector since I'm not supporting IE 6 with the site tough luck to anyone still using IE6 its about time they upgraded tbh

abduraooft
Jan 19th, 2010, 12:47 PM
I don't quite understand what you mean by this though


2) You need to opt a suitable background - foreground color combination to make the menu visible even in the absence of background images.
Let's make it clear, before making any correction. When I preview the code given by you, all that I get is a white bar (even on mouse-over), except a drop down when the mouse go though the right hand side :). So, I can't visualise the issue at your end.

What I said is to apply a different value for the color and background-color properties, so as to make your menu items visible for users with no image loaded into their browser.

hinch
Jan 19th, 2010, 01:21 PM
ahh thats just because you don't have the 2 images I use for my background then :)

the screenshot attached should help you see what it "should" look like but I'll also PM you a url to my test site so you can see it in action

abduraooft
Jan 19th, 2010, 01:37 PM
Um.. Try changing
.menu ul ul a, .menu ul ul a:visited {
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:128px;
background-color: #84c3ff;
} to

.menu ul ul a, .menu ul ul a:visited {
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:128px;
background: #84c3ff;
}. Otherwise you need to reset the background-image property, like background-image:none;

hinch
Jan 19th, 2010, 01:46 PM
sorted it spot on thank you kindly. I really am a retard when it comes to CSS :)