Block did not work

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. :slight_smile:

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 :slight_smile:

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. :slight_smile:

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. :slight_smile:

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. :slight_smile:

I might test it in IE later, but I don’t have it handy right now.

Thank you ralph,…I learned it from you :slight_smile:
By the way can you also please check in safari i don’t have safari…Thank you in advance.

:eek:

Yes, it works in Safari, and Opera, too. :slight_smile:

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;
}