Yup i saw that, but he uses the script .over?..i was confused in the script.
Yeah, that’s just for IE6, I think, which had problems with hovering on elements other than <a>. But IE6 is dead now, so don’t worry about it.
Hi ralph, I got it now take a look at i did not use script…i can hover and put background color.
please correct me if i am wrong…
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav > li:first-letter{
text-transform: uppercase;
}
.nav > li{
float: left;
margin-right: 0.1em;
min-width: 8em;
text-align: center;
background-color: red;
}
.nav li a:link,
.nav li a:visited{
text-decoration: none;
}
.nav li ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.nav li ul li{
display: none;
}
.nav li:hover li{
display: block;
padding: 0.5em;
background-color: yellow;
color: #FFF;
}
.nav li:hover,
.nav ul li:hover {
background-color: violet;
display: block;
}
Are you using the same HTML as Paul? If you’ve changed it at all, post that too.
This is my HTML sorry i forgot to post,…i got problem i tested it I.E 8 but my css did not work at all.what lacking on this Ralph?
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu2.css" style="text/css"/>
</head>
<body>
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">how</a></li>
<li><a href="#">where</a></li>
<li><a href="#">when</a></li>
</ul>
</li>
<li><a href="#">services</a></li>
</ul>
<body>
</html>
It’s working now on I.E 8, it was just i have no html tag,that’s why the I.E 8 cannot render properly my css…again please correct me if i am wrong ralph
You’ve left out a lot of important CSS there. Go back to Paul’s code and start with that. Then make one change at a time and test the results, so if you make a mistake, you know where you went wrong. It seems to me you just need to change a few colors.
Yes, but not in Chrome etc. You’ve left out too much of Paul’s CSS as mentioned above.
yup the color, i don’t know how to use the RGB colors,
You’ve left out a lot of important CSS there
Okay i will try to see what is lacking
Thank you ralph for letting me know in chrome,okay i will fix this…
Tht’s quite easy. If you have Photoshop, open the color palette and choose a color your like (visually) and it will give you the RGB values and the hex values. E.g. black is rgb(0,0,0) or hex #000000.
If you don’t have Photoshop, you can use any of a number of online services, like Color Scheme Designer. Pick the color you want and it will give you the code.
Hi, ralph how did paul invisible the sub menu,i don’t see the display none
why he used margin-left to hide the sub menu and he put valued -999em?
#nav li ul {
position: absolute;
margin-left: -999em; /* hide menu from view */
top: auto;
left:0;
}
why it did not work on chrome?..i tried to fixed but nothing happen.are all my css is wrong or not in standard?
It’s working now on chrome,take a look at…by the way some alignment i did not fix and also the color,i just only fix the background color in chrome when it’s going to hover…please correct me if i am wrong.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu2.css" style="text/css"/>
</head>
<body>
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">how</a></li>
<li><a href="#">where</a></li>
<li><a href="#">when</a></li>
</ul>
</li>
<li><a href="#">services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
<body>
</html>
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav > li:first-letter{
text-transform: uppercase;
}
.nav > li{
float: left;
margin-right: 0.1em #959597;
min-width: 8em;
text-align: center;
background-color: #E56500;
border:solid 1px #959597;
}
.nav li a:link,
.nav li a:visited{
text-decoration: none;
}
.nav li ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li{
display: none;
}
.nav li:hover li{
display: block;
padding: 0.1em;
background-color: #d2cb08;
color: #bebeb8;
text-align: justify;
}
/*
.nav li:hover,
.nav ul li:hover {
background-color: #E56500;
display: block;
color: #FFF;
}
*/
.nav ul li{
border: solid 1px #959597;
}
.nav ul li:hover,
.nav ul li:hover a{
color: #FFF;
background-color: #E56500;
}
I’ve tested it in Chrome and Firefox and it seems to work fine. Well done.
I might test it in IE later, but I don’t have it handy right now.
Thank you ralph,…I learned it from you
By the way can you also please check in safari i don’t have safari…Thank you in advance.
Yes, it works in Safari, and Opera, too.
The first letter to uppercase did not work anymore because i have changes,and i tried to put the prefix vendor still doesn’t work.
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav li:first-letter{
-moz-text-transform: uppercase;
-ms-text-transform: uppercase;
}
.nav > li{
float: left;
margin-right: 0.1em #959597;
min-width: 8em;
text-align: center;
background-color: #FFF;
border:solid 1px #959597;
}
.nav li a:link,
.nav li a:visited{
text-decoration: none;
color: #606061;
display: block; /* here i put block because when i am going to hover the about the text will change to white like paul example*/
}
.nav li ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li{
display: none;
}
.nav li:hover li{
display: block;
text-align: justify;
color: #606061;
}
/*
.nav li:hover,
.nav ul li:hover {
background-color: #E56500;
display: block;
color: #FFF;
}
*/
.nav ul li{
border: solid 1px #959597;
}
.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
color: #FFF;
background-color: #E56500;
}
.nav li:hover li a{
color: #777777;
background-color: #d2cb08;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu2.css" style="text/css"/>
</head>
<body>
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">how</a></li>
<li><a href="#">where</a></li>
<li><a href="#">when</a></li>
</ul>
</li>
<li><a href="#">services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
<body>
</html>
Hi raplh, it’s working now the uppercase
.nav li a:first-letter{
text-transform: uppercase;
}