html - Navigation Menu with multiple colored tabs - How to change CSS -
i'm trying navigation menu figured out i'm not sure i'm doing wrong. i'm trying give each menu item it's own background color, i've done successfully, can't colors space out correctly. got background going through whole thing (the green , gray in between menu items) i'm not sure how translate menu items auto scaling match 940px nav. bar...
here link: www.pancakeweb.com/preschool/test.html
css:
#header .navigation { padding: 0 5px; width: 940px; } #header .navigation > ul:before, #header .navigation > ul:after { content: ""; display: table; } #header .navigation > ul:after { clear: both; } #header .navigation > ul { background: url(../images/bg-navigation.gif) repeat-x bottom left; margin: 0; padding: 0; } #header .navigation > ul .link1 { background: url(../images/bg-navigationb.gif) repeat-x bottom left; } #header .navigation > ul .link2 { background: url(../images/bg-navigationo.gif) repeat-x bottom left; } #header .navigation > ul .link3 { background: url(../images/bg-navigationr.gif) repeat-x bottom left; } #header .navigation > ul .link4 { background: url(../images/bg-navigationg.gif) repeat-x bottom left; } #header .navigation > ul > li { display: block; float: left; list-style: none; margin: 0 35px; position: relative; padding: 0; } #header .navigation > ul > li > { color: #fff; display: block; font-family: 'lato-light'; font-size: 14px; font-weight: normal; height: 52px; line-height: 56px; margin: 0; padding: 0 8px; text-align: center; text-transform: uppercase; text-decoration: none; } #header .navigation > ul > li.selected > { font-family: 'lato-black'; } #header .navigation > ul > li > a:hover { color: #e2e2e2; } #header .navigation > ul > li.booking > { color: #fcac00; font-family: 'lato-black'; } #header .navigation > ul > li.booking > a:hover { color: #f3be4b; } #header .navigation ul ul { left: -99999px; margin: 0; padding: 0; position: absolute; top: 52px; z-index: 5; } #header .navigation > ul > li:hover ul { left: 0; } #header .navigation ul ul li { border-top: 1px solid #fff; display: block; list-style: none; margin: 0; padding: 0; width: 180px; } #header .navigation ul ul li:first-child { border: 0; } #header .navigation ul ul li { background: #e9e9e9; color: #000000; display: block; height: 23px; font-family: 'lato-light'; font-size: 13px; font-weight: normal; line-height: 23px; margin: 0; padding: 0 15px; text-decoration: none; text-transform: capitalize; } #header .navigation ul ul li a:hover { background: #fcac00; color: #fff; } html:
<div class="navigation"> <ul> <li class="link1"> <a href="index.php">home</a> </li> <li class="link2"> <a href="playbased.php">about</a> </li> <li class="link3"> <a href="admissions.php">admissions</a> </li> <li class="link4"> <a href="teachers.php">teachers</a> </li> <li class="link1"> <a href="community.php">kindergarten</a> <ul> <li> <a href="afterschool.php">after school programs</a> </li> <li> <a href="springcamps.php">spring break camps</a> </li> <li> <a href="camps.php">summer camps</a> </li> </ul> </li> <li class="link2"> <a href="contact.php">contact</a> <ul> <li> <a href="contact.php">visiting sudbury</a> </li> <li> <a href="map.php">map & directions</a> </li> <li class="selected"> <a href="donations.php">giving sudbury</a> </li> </ul> </li> </ul> </div> </div>
it looks want change:
#header .navigation > ul > li { display: block; float: left; list-style: none; margin: 0; position: relative; padding: 0 35px; } i replaced 35px side-margins padding.
Comments
Post a Comment