html - Add hover state for menu item with a little white bar -


consider following structure:

<ul>     <li><a href="">home</a><img src="menu_hover_line.jpg" class="whitebarhover" /></li>     <li><a href="">contacts</a><img src="menu_hover_line.jpg" class="whitebarhover" /></li> </ul> 

here "a" block element (display:block;) , menu element, height , paddings right , left:

li { display:inline-block; float:left; position:relative;   } {     text-decoration:none;     font-family:arial, helvetica, sans-serif;     font-size:14px;     color:#131313;     display:block;     line-height:51px;     padding:0px 29px; } a:hover {     background-color:#000;     border:0 none;     color:#fff; }  .whitebarhover {     width:40px;     height:3px;     position:absolute;     top:2px;     visibility:hidden; } div#menu li:hover img.whitebarhover {     visibility:visible; } 

the point of "img" , related css code in each "li" have image shown below

menu_hover_line.jpg => enter image description here

on hover event in top center of each menu item. done. image not in center in horizontal direction. how can center it?

if it's position absolute have define left:50% & margin-left:-20px; half width of image. this:

.whitebarhover {     width:40px;     height:3px;     position:absolute;     top:2px;     left:50%;     margin-left:-20px;     visibility:hidden; } 

check http://jsfiddle.net/brurq/


Comments

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -