No replies
TWyPGn
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2009-03-19
Posts: 4
Points: 0

Hello, there are sub-navigation lists in the main list. The HTML and CSS is as follows:

HTML

CSS

#navcontainer {
margin: 0px;
background: #D3C196;
padding: 0 1px;
margin: 0px;
width: 250px;
}

ul#navlist, ul#subnavlist1, ul#subnavlist2, ul#subnavlist3 {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sans-serif;
}

/* MAIN NAVIGATION LIST */

ul#navlist li { margin: 0 0 1px 0; }

ul#navlist li a {
display: block;
margin-bottom: 5px;
margin-top: 5px;
background: #DCCEAD;
border-width: 1px;
border-style: solid;
border-color: #EBE2CF #C5AC72 #CDB887 #800000;
border-left: 12px solid #800000;
padding: 2px;
font-size: 12px;
color: black;
text-decoration: none;
font-weight: bold;
}

ul#navlist li a:hover {
background: #D3C196;
border-color: #C5AC72 #EBE2CF #EBE2CF #800000;
padding: 4px;
}

ul#navlist li a#current { border-left: 12px solid #FF9933; }

ul#navlist li a.drop {
background: #DCCEAD url('arrow.gif') no-repeat 95% 5%;
border-color: #EBE2CF #C5AC72 #CDB887 #800000;
padding: 2px;
}

ul#navlist li a.drop:active { border-color: #EBE2CF #C5AC72 #CDB887 #FF9933; }

/* SUB NAVIGATION LISTS */

ul#subnavlist1 li { display: inline; }

ul#subnavlist1 li a {
display: block;
margin-left: 10px;
margin-right: 10px;
padding: 2px;
background: transparent;
border-top: 0px none;
border-right:0px none;
border-left:0px none;
border-bottom: 1px dashed black;
font-size: 11px;
color: black;
text-decoration: none;
font-weight: normal;
}

ul#subnavlist1 li a:hover {
padding: 2px;
text-decoration: none;
border-top: 0px none;
border-right:0px none;
border-left:0px none;
border-bottom: 1px dashed black;
color: white;
}

----------------------------------
ul#subnavlist2 li { display: inline; }

ul#subnavlist2 li a {
display: block;
margin-left: 10px;
margin-right: 10px;
padding: 2px;
background: transparent;
border-top: 0px none;
border-right:0px none;
border-left:0px none;
border-bottom: 1px dashed black;
font-size: 11px;
color: black;
text-decoration: none;
font-weight: normal;
}

ul#subnavlist2 li a:hover {
padding: 2px;
text-decoration: none;
border-top: 0px none;
border-right:0px none;
border-left:0px none;
border-bottom: 1px dashed black;
color: white;
}
-------------------------------------
ul#subnavlist3 li { display: inline; }

ul#subnavlist3 li a {
display: block;
margin-left: 10px;
margin-right: 10px;
padding: 2px;
background: transparent;
border-top: 0px none;
border-right:0px none;
border-left:0px none;
border-bottom: 1px dashed black;
font-size: 11px;
color: black;
text-decoration: none;
font-weight: normal;
}

ul#subnavlist3 li a:hover {
padding: 2px;
text-decoration: none;
border-top: 0px none;
border-right:0px none;
border-left:0px none;
border-bottom: 1px dashed black;
color: white;
}

-----------------------------------

ul#navlist li a#subcurrent {
font-weight: bold;
color: #800000;
}

ul#navlist li a#subcurrent:hover { color: #ddd; }

Problem:

The sub-current link (a#subcurrent) in subnavlist1, subnavlist2 or subnavlist3 works partially: the text doesn't change its color and weight, however the 'a#subcurrent:hover' link works as it changes its color to grey.

I have tried using class subnavlist instead of 3 different IDs but that changes the layout. I have tried using subnavlist1, subnavlist2, subnavlist3 in the a#subcurrent link but to no avail. Could anybody please help me in getting the link work properly? I hope I have explained the problem well. Thanks!