| Hi! I´m struggling with a top menu, "sliding doors" with CSS. I have two pictures with rounded corners. One left and one right. I´m trying to highlight my links when selected with #active_menu-nav but only one picture is visible. (Highlight is enabled in topmenu module) I attached a screenshot with the problem and as you can see the selected link only have one rounded corner, i want the left-pic to be shown aswell. here is the CSS code. #buttons { float: left; margin:0px; padding:0px; width:100%; } #buttons ul { list-style: none; padding: 0; margin: 0; } #buttons a { background:url(../images/menu-left.png) no-repeat left top; line-height: 20px; height:24px; display: block; padding-left:12px; padding-right: 12px; color: #FFFFFF; font-weight: bold; } #buttons li { background:url(../images/menu-right.png) no-repeat right top; height:24px; padding-left: 0px; padding-right: 0px; float: left; margin-left: 2px; font-size: 12px; white-space: nowrap; font-weight: bold; } #buttons a#active_menu-nav { background:url(../images/menu-right2.png) no-repeat right; } #buttons li #active_menu-nav { background:url(../images/menu-left2.png) no-repeat left; } HTML code generated by joomla <div id="buttons"> <ul id="mainlevel-nav"> <li><a href="http://localhost/joomla/index.php" class="mainlevel-nav" >Home</a></li> <li><a href="http://localhost/joomla/index.php?option=com_virtuemart&Itemid=28" class="mainlevel-nav" id="active_menu-nav">Shop</a></li> <li><a href="http://localhost/joomla/index.php?option=com_virtuemart&Itemid=34" class="mainlevel-nav" >Konfigurator</a></li> <li><a href="http://localhost/joomla/index.php?option=com_content&task=section&id=1&Itemid=2" class="mainlevel-nav" >News</a></li> <li><a href="http://localhost/joomla/index.php?option=com_contact&Itemid=3" class="mainlevel-nav" >Contact Us</a></li> </ul> </div> I think this id="active_menu-nav" should be inside the <li> , but its inside the "a" tag?? It would be so nice if someone know how to fix this.. best regards /Robert |
Forum 





Author



Logged






