General Community > HTML/CSS

Need help. Hovering issue

(1/1)

artem543:
I'm customizing a new theme. First my navigation bar code is this:

--- Code: ---#menu-bar {
margin: 0 0 0 7px;
 padding: 2px 0 0 3px;
 width: 983px;
 height: 73px;
   background: url(../images/theme/navigation.png) no-repeat 0 0;

}
#menu-left {
}
#menu-right {
}

#topnav {
}
#topnav ul {
   margin: 0;
   padding: 0;
}
#topnav li {
   position: relative;
   display: inline;
   float: left;   
   line-height: 60px;
   text-shadow: 1px 1px #1b3242;
   background: url(../images/theme/nav-sep.png) no-repeat right 0;
}
#topnav li a {
   color: #fff;
   font-family: 'Play', sans-serif;
   font-size: 14px;
   text-shadow: 1px 1px #1b3242;
   text-transform: uppercase;
   font-weight: bold;
   padding: 0 13px 0 16px;
   display: inline;
   line-height: 60px;
}
#topnav li a.active {
}
#topnav li:hover a, #topnav li.sfhover a  {
text-decoration: none;
}
#topnav li:hover {
display: inline;
float: left;
background: url(../images/theme/nav-item.png) repeat-x 0 -4000px;
background-position: 0 0;
text-decoration: none;   
}
#topnav li:hover li a, #topnav li ul li a:hover {
 
  color: #fff;
  background: #4c4c4c;
  text-shadow: 0 1px 0 #1d1d1d;
   
}
#topnav li li {
   width: 200px;
   height: auto;
   padding: 0;
}
#topnav li li a, #topnav li li a:hover, #topnav li li a, #topnav a.active li a, #topnav li:hover li a, #topnav li.sfhover li a {
   background: none;
   height: 30px;
   line-height: 30px;
   margin: 0;
   font-weight: normal;
   text-transform: none;
   font-size: 12px;
   color: #FFF;
   text-shadow: 0 1px 0 #1d1d1d;
}
#topnav li ul {
   background: #202020;
   position: absolute;
   width: 200px;
   left: -999em;
   margin-left: -1px;
}
#topnav li ul ul {
   margin: -27px 0 0 195px;
}
#topnav ul li li:hover, #topnav ul li li.hover {
   position: static;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
   left: -999em;
}
#topnav li:hover ul, #topnav li.sfhover ul {
   left: 3px;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
   left: 0;
}
--- End code ---

My problem is: When I hover on the navigation bar. The nav-sep.png is getting hovered by the white hover image. So the right separation image is getting removed. The thing i want, is to get call something to remove few pixels from the right of the white hover image. so when i hover the button, it will leave the separation line between those buttons.

Thanks in advance.

Navigation

[0] Message Index