Re: Nav Background Position

[Historical Forums User]

this is what i’ve got so far:

Code:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: right;
margin-top: 60px;
}

ul.dropdown a {
color: #dadada;
text-decoration: none;
}

ul.dropdown li {
float: left;
vertical-align: middle;
text-transform: uppercase;
font-family: Arial;
font-size: 13px;
font-weight: bold;
height: 70px;
background: url(../images/nav.png) no-repeat top center;
}

ul.dropdown li:first-child {
background: url(../images/nav.png) no-repeat top left;
}

ul.dropdown li:last-child, ul.dropdown li.page-item-11 {
background: url(../images/nav.png) no-repeat top right;
}

ul.dropdown li a {
display: block;
padding:28px 36px 29px 36px;
text-align: center;
}

ul.dropdown li:first-child a {
padding-left: 45px;
}

ul.dropdown li:last-child a {
padding-right: 45px;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
color: #fff;
background: url(../images/nav.png) no-repeat bottom center;
}

ul.dropdown li:first-child.hover,
ul.dropdown li:first-child:hover {
background: url(../images/nav.png) no-repeat bottom left;
}

ul.dropdown li:last-child.hover,
ul.dropdown li:last-child:hover,
ul.dropdown li.page-item-11:hover {
background: url(../images/nav.png) no-repeat bottom right;
}

ul.dropdown li.current_page_item {
color: #fff;
}

ul.dropdown li:first-child.current_page_item {
background: url(../images/nav.png) no-repeat bottom left;
}

ul.dropdown li:last-child.current_page_item,
ul.dropdown li.page-item-11.current_page_item {
background: url(../images/nav.png) no-repeat bottom right;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 300px;
}

and for some reason this isn’t working in ie for the hover state:

Code:

ul.dropdown li:last-child.hover,
ul.dropdown li:last-child:hover,
ul.dropdown li.page-item-11:hover {
background: url(../images/nav.png) no-repeat bottom right;
}

nevermind, the last child / page-item-11 still isnt working for some reason. just checked it again. i think it was working earlier. hmm…