Hi, I am trying to put this effect on a new web and everything works fine except that when I am on a page with the current_page_item active the line appears on the right instead of the correct position. But is very strange because on the “hover” it works correctly.
My CSS is this:
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */
#example-one { margin: 0 auto; list-style: none; position: relative; width:950px; text-transform:uppercase; font-family: 'BlissProMedium', sans-serif; height:34px;}
#example-one li { display:inline-block; float: left; font-family: 'BlissProMedium', sans-serif; }
#example-one li a { color:#999999; padding-left:10px; font-family: 'BlissProMedium', sans-serif; padding-right:44px; padding-top:9px; margin-top:10px; height:26px; display: block; text-decoration: none; text-transform: uppercase; border-left: 1px solid #EEEEEE; width: auto; }
#example-one li a:hover { color: #535353; }
#magic-line { position: absolute; bottom: -20px; left: 0; height: 6px; background: #CCCCCC; width:100px; }
.current_page_item { float: left !important; }
.current_page_item a { color:#535353 !important; display: block !important; width:auto !important; }
And the web when i am trying this: http://www.hospitaldemolina.com/web/servicios/
So the line works correctly and moving ok but the position of the line in “current_page_item” is not correct and i dont know how can i change the position of the line just in this case.
Thank you !
