We help IT Professionals succeed at work.

Stop hover for a particular <li>

5281
5281 asked
on
Hi,

I have a horizontal drop down menu, it hover to another background image when mouseover, can I make one particular tab stop hover when mouseover?  Here is my code.

#navsite ul li a {
 padding: 10px 0.7em;
 margin-left: 0px;
 margin-right: 2px;
 border: 0px solid #778;
 border-bottom: none;
 border-right:1px solid black;
 border-left: 1px solid black;
 background-color: #003656;
 text-decoration: none;
 background-position: 50%;
 background-repeat: repeat-x;
 display: block;
}

#navsite ul li a:hover {
color:white;
background-image:  url(Images/mouseover.png);
}

<div id="navsite">
 <ul>
<li><a href="overview.html"> RESOURCES</a> </li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;</a></li>
</ul>
</div>

                 
Comment
Watch Question

Commented:

Delete:

background-image:  url(Images/mouseover.png);
Top Expert 2013

Commented:
You've only got one tab. Just remove the hover declaration.

If there is more code than this show it, or better yet give us a link to the page.



Cd&
Top Expert 2013
Commented:
Oh wait a minute.  you jus want to kill hover on one li.

Give he target li an id like id="myli"

then add a style:

#myli {background-color:#003656;}


Cd&

Commented:

But it doesn't work for me.

Well I am sending a good old way to solve that problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Hover</title>
  
<style type="text/css"> 
#navsite a {
 padding: 10px 0.7em;
 margin-left: 0px;
 margin-right: 2px;
 border: 0px solid #778;
 border-bottom: none;
 border-right:1px solid black;
 border-left: 1px solid black;
 background-color: #003656;
 text-decoration: none;
 background-position: 50%;
 background-repeat: repeat-x;
 display: block;
}

#navsite1 a {
 padding: 10px 0.7em;
 margin-left: 0px;
 margin-right: 2px;
 border: 0px solid #778;
 border-bottom: none;
 border-right:1px solid black;
 border-left: 1px solid black;
 background-color: #003656;
 text-decoration: none;
 background-position: 50%;
 background-repeat: repeat-x;
 display: block;
}

#navsite a:hover {
color:white;
background-image:  url(Images/mouseover.png);
}

#navsite1 a:hover {
color:white;
}
</style>
</head>

<body>
<center>
<br>
<br>
<div id="navsite1"><a href="overview.html">RESOURCES</a></div><br>
<div id="navsite"><a href="aboutus.html">ABOUT US</a></div><br>
<div id="navsite"><a href="#">CONTACT</a></div>
</center>
</body>
</html>

Open in new window


I have edit a new code, but it works for me under IE 8 and Firefox 9 !!!

best regards

Nrisimha

Author

Commented:
Thank you for your help.

COBOLdinosaur's method worked.  But I came across another problem, I made the last tab stop hover now.  But I found the tab looks different in IE7 and IE8, if I type many &nbsp, I can make last tab of horizontal menu bar reach the end in IE8, but doesn't read the end in IE7.  How to solve that problem?  Thank you.

#lasttab {
background-color:#003656;
padding: 10px 0.7em;
}

 
<div id="navsite">
 <ul>
<li><a href="overview.html"> RESOURCES</a> </li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li id="lasttab">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                        
</li>
</ul>
</div>





Top Expert 2013

Commented:
They don't render the same and never have.  IE7 is just about finished. Very few people use it.  There probably are as many IE6 users as IE7.  If you want to support obsolete browser that are broken you will have to hack the code in some way.  I don't have anything as old as IE 7 to test with so there is not much I can do except say why worry about old browsers that no body uses; and anybody that does use them is used to them being broken anyway.


Cd&