html - CSS No image for first ul in horizontal menu -
i trying make horizontal menu using ul, custom bullet image. want first menu item not have bullet on left hand side looks neat. bullets appearing in between items, not before menu items start.
here have far:
#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator { text-align: left; text-transform: uppercase; color: #777; font-family: trajan; background-image: url('../images/bullet.jpg'); background-repeat: no-repeat; background-position: 0px 15px; padding-left: 25px; } #navwrap ul.nav > li > a:hover, #navwrap ul.nav > li .separator:hover { color: #333; background-image: url('../images/bullet.jpg'); background-repeat: no-repeat; background-position: 0px 15px; padding-left: 25px; } #navwrap ul.nav > li.active > a, #navwrap ul.nav > li.active .separator { color: #333; text-align: left; background-image: url('../images/bullet.jpg'); background-repeat: no-repeat; background-position: 0px 15px; padding-left: 25px; }
i tried adding:
#navwrap ul.nav > li:first-child > a, #navwrap ul.nav > li:first-child .separator { text-align: left; text-transform: uppercase; color: #777; font-family: trajan; background: none; padding-left: 25px; } #navwrap ul.nav > li:first-child > a:hover, #navwrap ul.nav > li:first-child .separator:hover { color: #333; background-repeat: no-repeat; background-position: 0px 15px; padding-left: 25px; } #navwrap ul.nav > li:first-child.active > a, #navwrap ul.nav > li:first-child.active .separator { color: #333; text-align: left; background: none; padding-left: 25px; }
which seemed work made menu 'jump' right bit when hovered on it. best way achieve trying without first item moving when in hover state?
thanks joshc, removing background:none
hover fixed it.
thanks.
removing background:none
first-child hover fixed it.
Comments
Post a Comment