PDA

View Full Version : Mac-like Menu Link Color Wont Stay


nubdev
10-03-2010, 03:10 PM
Hi Guys n Gals,

I'm new to this forum and to CSS in general so firstly I would like to say hi :grin: Now onto my problem.

I decided to create a MAC like menu using CSS3 only. The problem I'm having is that as I roll over the links they turn white as I wanted but if you take your cursor slightly off the link it goes back to black text. How can I make sure the text stays white as long as the cursor is within the list item area? Hope that makes sense. Iv'e written this to work in Chrome only at the moment (and other webkit browsers).

This is the CSS Code I'm using (macmenu.css):

#navigation li {
list-style-type: none;
display: block;
width: 8em;
float: left;
text-align: center;
font-family:"Lucida Grande", sans-serif;
font-weight:bolder;
border:.1em #666 solid;
height: 3em;
-webkit-border-radius:5em;
background: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
}

#navigation li a {
color:#000;
text-shadow: 1px 1px 0px #cccccc;
display: block;
padding: .8em .5em .5em .5em;
text-decoration: none;
}

#navigation li a:hover {
color:#FFF;
text-shadow: 1px 1px 0px #000;
}

#navigation li:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
}

And this is the HTML5 Document code:


<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="macmenu.css" rel="stylesheet" type="text/css">
<title>Mac Like Menu Written Using CSS3</title>

</head>

<body>
<h1>MAC Like Menu Coded In CSS3</h1>

<div id="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>

</body>
</html>


Thanks in advance for any help!!!

gentleone
10-03-2010, 06:19 PM
It's better to bring all the CSS properties that you have on the #navigation li to #navigation li a. Just only keep list-style-type: none and float: left in #navigation li. I'm not 100% sure this will solve your problem, but I have a strong believe.

And welcome to the forum!

DWcourse
10-04-2010, 04:04 AM
gentleone's advice is a good start but you also need to keep the width property in the li style.

Corrosive
10-04-2010, 06:09 AM
I did this some time ago; http://corrosiveonline.co.uk/tutorials_css3_apple_menu.php I guess it is similar (though I haven't checked how yours displays) and may give some help in getting the rollovers right.

nubdev
10-04-2010, 09:08 PM
Thanks so much guys, I managed to get it all working with your advice. I love your site Corrosive I've bookmarked it for future reference.

Corrosive
10-05-2010, 06:16 AM
I love your site Corrosive I've bookmarked it for future reference.

That's nice to hear, thank you.