how to make the class="selected" work inClean Arrow Underline Menu [Archive]

din

03-14-2012, 11:17 AM

1) CSS Library: Horizontal CSS Menus: Clean Arrow Underline Menu

2) http://www.dynamicdrive.com/style/csslibrary/item/clean_arrow_underline_menu/

3) Hi dynamic drive team...
Could you please point me in the right direction for
making the arrow show when adding the class "selected" (either in li or a:active)

<ul class="arrowunderline"
<li> <a href="#"><b>test</b>Concept</a></li>
<li class="selected"><a href="#"><b>test</b>Community</a></li>
<li><a href="#"><b>test</b>Partner</a></li>
</ul>

thanks a ton in advance

din

ddadmin

03-14-2012, 06:18 PM

Sure, use the below modified version of the code, which supports a CSS class of "selected" that can be inserted into a particular menu link to always show the underline arrow underneath that item. Changes in red:

<style>

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover, ul.arrowunderline li a.selected{
border-bottom:3px solid purple; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after, ul.arrowunderline li a.selected:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent purple transparent; /* create up arrow */
}

</style>

<body>

<ul class="arrowunderline">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" class="selected">New</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://tools.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
</ul>