background-color style on menu list in html

Dear Expert,
I have successfully to complete normal menu list in html code with the following html code and its style
And everthing is fine and once I point one of menu list item, The one Menu icon background-color is changed from
grey to blue and text is also changed from white to red . So  the style  is working on the menu as follows
.menu ul li a{
      float: left;
      text-decoration: none; /* removes the underline from the menu text */
      color: #fff; /* text color of the menu */
      padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
      background-color:#333;}
.menu ul li a:hover{
      color: red;
      background-color:#0b75b2;/*blue color I want */}

But the question is if we go to do some gradient effect on the menu bar such color change from black to white gradully.
So i go ahead to   replace the code background-color:#333; in the code area  by the following code:
background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(red, white); /* the standard */
      }      


The gradient effect is woring fine and good but the a:hover's  css code  is not working at all when I point to
the menu item , it is still same as before , no any change. Why ?

Do I need to use other code instead of a:hover in html , Please advise

Duncan

/* Original menu list html program without gradient effect */

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
html{
	font:11px Arial, Helvetica, sans-serif; /* Sets the font size and type for the whole html page */
	color:#333;} /* Sets the font color for the whole html page */
.menu{
	width: 100%; /* The menu should be the entire width of it's surrounding object, in this case the whole page */
	background-color: #333;} /* dark grey bg */

.menu ul{
	margin: 0;
	padding: 0;
	float: left;}

.menu ul li{
	display: inline;} /* Makes the link all appear in one line, rather than on top of each other */

.menu ul li a{
	float: left; 
	text-decoration: none; /* removes the underline from the menu text */
	color: #fff; /* text color of the menu */
	padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
	background-color:#333;
	 	
    
}

.menu ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
	color: red;
	text-decoration: none;}
.menu ul li a:active{
background-color:#0b75b2;
}
.menu ul li a:hover{
	color: red;
	background-color:#0b75b2;} /* change the background color of the list item when you hover over it */
</style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        <br style="clear: left" />
    </div>
</body>
</html>

Open in new window

LVL 13
duncanb7Asked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
In the <<.menu ul li a:hover>> (line 37) also, you either need to have the gradient only, or first set
background:none first and then set the background-color
0
 
duncanb7Author Commented:
So you mean like this follows , Please advise

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
html{
      font:11px Arial, Helvetica, sans-serif; /* Sets the font size and type for the whole html page */
      color:#333;} /* Sets the font color for the whole html page */
.menu{
      width: 100%; /* The menu should be the entire width of it's surrounding object, in this case the whole page */
      background-color: #333;} /* dark grey bg */

.menu ul{
      margin: 0;
      padding: 0;
      float: left;}

.menu ul li{
      display: inline;} /* Makes the link all appear in one line, rather than on top of each other */

.menu ul li a{
      float: left;
      text-decoration: none; /* removes the underline from the menu text */
      color: #fff; /* text color of the menu */
      padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
      background-color:none;
background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(red, white); /* the standard */

             
   
}

.menu ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
      color: red;
      text-decoration: none;}
.menu ul li a:active{
background-color:#0b75b2;
}
.menu ul li a:hover{
      color: red;
      background-color:#0b75b2;} /* change the background color of the list item when you hover over it */
</style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        <br style="clear: left" />
    </div>
</body>
</html>
0
 
Gurvinder Pal SinghCommented:
check this
.menu ul li a:visited
{
      color: red;
      text-decoration: none;
}

.menu ul li a:active
{
      background:none;
      background-color:#0b75b2;
}
.menu ul li a:hover
{
      background:none;
      color: red;
      background-color:#0b75b2;
}
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
duncanb7Author Commented:
Your post code is same as the one I sent it  to you,  So what I need to check ? please advise ?
0
 
Gurvinder Pal SinghCommented:
no you didn't add background:none for active and visited pseudo-selector
0
 
duncanb7Author Commented:
hover is working fine on text color with gradient menu bar but still not working on changing
background-color from gradient background
0
 
Gurvinder Pal SinghCommented:
check this code (works for me in IE8 and chrome6)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu</title>
<style type="text/css">
html{
      font:11px Arial, Helvetica, sans-serif; /* Sets the font size and type for the whole html page */
      color:#333;} /* Sets the font color for the whole html page */
.menu{
      width: 100%; /* The menu should be the entire width of it's surrounding object, in this case the whole page */
      background-color: #333;} /* dark grey bg */

.menu ul{
      margin: 0;
      padding: 0;
      float: left;}

.menu ul li
{
      display: inline;
} 

.menu ul li a
{
    float: left;
    text-decoration: none; /* removes the underline from the menu text */
    color: #fff; /* text color of the menu */
    padding: 10.5px 11px; /* 10.5px of padding to the right and left of the link and 11px to the top and bottom */
    background-color:none;
	background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(red, white); /* the standard */
             
   
}

.menu ul li a:visited
{ 
      color: red;
      text-decoration: none;
}
.menu ul li a:active
{
	background:none;
	background-color:#0b75b2;
}
.menu ul li a:hover
{
	background:none;
    color: red;
    background-color:#0b75b2;
} 
</style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        <br style="clear: left" />
    </div>
</body>
</html>

Open in new window

0
 
duncanb7Author Commented:
Yes, it isworking on firefox and chrome , but is not working in IE7 , do you know to work on IE7?
0
 
Gurvinder Pal SinghCommented:
Sorry, i don't have IE7 on my system. I checked in on IE8 though, and it worked there
0
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
Since you can't reset the filter, you can trick IE with this:
 
.menu ul li a:hover
{
    color: red;
    background-color:#0b75b2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2')"; /* IE8+ */  
  
}

Open in new window

0
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
oops, I didn't mean to take out the background:none; Put that back in.

.menu ul li a:hover
{
    background:none;
    color: red;
    background-color:#0b75b2;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b75b2', endColorstr='#0b75b2')"; /* IE8+ */  
  
}

Open in new window

0
 
duncanb7Author Commented:
Thanks fort work your reply, finaly it works if change it
to

.menu ul li a:hover{
      
/*background:none;
 background-color:#0b75b2;*/
 color: white;
   
background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(black, white); /* the standard */

      }
0
 
duncanb7Author Commented:
And  also need to put back href="javascript:home();" to replace any onlick="home();" in <a> tag
since onclick is not working with a:hover for all broswer  
 
<li><a href="#">Home</a></li>
0
 
Kyle HamiltonData ScientistCommented:
Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.