TWyPGn
26 Mar 2009, 03:30 PM
Problem solved. Link is working fine now.
------------------------------------------------------------------
Hello, there are sub-navigation lists in the main list. The HTML and CSS is as follows:
HTML
<div id="navcontainer">
<ul id="navlist">
<li><a href="homepage.html">Home</a></li>
<li><a href="aboutme.html">Personal Information</a></li>
<li><a href="#" id="current" class="drop">Item 3</a>
<ul id="subnavlist1">
<li><a href="#" id="subcurrent">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
<li><a href="#">sub-item3</a></li>
</ul>
</li>
<li><a href="#" class="drop">Item 4</a>
<ul id="subnavlist2">
<li><a href="#">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
<li><a href="#">sub-item3</a></li>
</ul>
</li>
<li><a href="#" class="drop">Item 5</a>
<ul id="subnavlist3">
<li><a href="#">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
</ul>
</li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</div> <!-- end of menu -->
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!
------------------------------------------------------------------
Hello, there are sub-navigation lists in the main list. The HTML and CSS is as follows:
HTML
<div id="navcontainer">
<ul id="navlist">
<li><a href="homepage.html">Home</a></li>
<li><a href="aboutme.html">Personal Information</a></li>
<li><a href="#" id="current" class="drop">Item 3</a>
<ul id="subnavlist1">
<li><a href="#" id="subcurrent">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
<li><a href="#">sub-item3</a></li>
</ul>
</li>
<li><a href="#" class="drop">Item 4</a>
<ul id="subnavlist2">
<li><a href="#">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
<li><a href="#">sub-item3</a></li>
</ul>
</li>
<li><a href="#" class="drop">Item 5</a>
<ul id="subnavlist3">
<li><a href="#">sub-item1</a></li>
<li><a href="#">sub-item2</a></li>
</ul>
</li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</div> <!-- end of menu -->
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!