- This topic is empty.
-
AuthorPosts
-
October 10, 2011 at 5:39 am #34706tobeeornotMember
Hi,
I am having trouble setting my sidebar nav so the rollover works on every tab. It only works on the first one but not on the rest and I am not sure why. Would appreciate any solutions.
Here is the fiddle: http://jsfiddle.net/tobeeornot/7q6J2/4/
Here is the relevant HTML and CSS code:
/*sub-navigation*/
#sub-navigation {
margin: 0 0 30px 0;
}
#sub-navigation ul {
list-style: none; /*gets rid of bullets*/
}
#sub-navigation ul li a {
display: block; /*anchor linkls are by default inline*/
background-color: #647484; /*default color for links*/
color: white;
font-family:Verdana, Geneva, sans-serif;
font-size: 1.6em;
padding: 10px 10px 10px 25px;
position: relative;
text-decoration:none; /*anchor links are underline by default'none' gets rid of this */
margin: 0 0 5px 0;
width: 233px;
}
#sub-navigation ul li span {
position:absolute;
right: 100%;
top: 5px;
width: 15px;
height: 100%;
background-color: #647484; /*default color for links*/
background-image: url(../images/navshadow.png); /*shadow effect for background nubs*/
background-position: right top;
background-repeat: repeat-y; /*y - vertically positioned*/
}
#sub-navigation ul li:nth-child(2) a, #sub-navigation ul li:nth-child(2) a span {
background-color: #728c8c;
}
#sub-navigation ul li:nth-child(3) a, #sub-navigation ul li:nth-child(3) a span {
background-color: #768c72;
}
#sub-navigation ul li:nth-child(4) a, #sub-navigation ul li:nth-child(4) a span {
background-color: #909673;
}
#sub-navigation ul li:nth-child(5) a, #sub-navigation ul li:nth-child(5) a span {
background-color: #647484;
}
#sub-navigation ul li:nth-child(6) a, #sub-navigation ul li:nth-child(6) a span {
background-color: #728c8c;
}
#sub-navigation li a:hover {
text-decoration: none;
background-color: #666;
}
#sub-navigation li a:hover span {
background-color: #666;
}October 10, 2011 at 5:52 am #88778SgtLegendMemberIn your code you currently have the following:
#sub-navigation li a:hover {
text-decoration: none;
background-color: #666;
}
#sub-navigation li a:hover span {
background-color: #666;
}When your working with child elements you need to remember that whatever selector chain you used before the next selector has to be the same or greater then the previous selector it the change won’t take effect. In the above code you posted the :nth-child() selectors are chained with the UL element while the hover states only direct themselves to the li element which is a lower level selector chain compared to the code before it.
To fix this all you need to do is simply add UL to the selector chain and the hover state will work fine:
#sub-navigation ul li a:hover {
text-decoration: none;
background-color: #666;
}
#sub-navigation ul li a:hover span {
background-color: #666;
}October 10, 2011 at 6:00 am #88784tobeeornotMemberHey Sgt Legend,
Thanks for the reply. Is the solution still valid?
October 10, 2011 at 6:01 am #88785tobeeornotMemberSure is. Many thanks for that and the thorough explanation!!!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.