/* CSS Document */ nav { display: block; height: 30px; width: 910px; margin: 0 auto; margin-bottom: 1px; z-index: 5 !important; } nav ul { padding:0; margin:0; z-index: 5 !important; } nav ul li { float: left; line-height: 30px; padding-right: 1px; z-index: 5 !important; } nav ul li a { display: block; color: #fff; font-family: Verdana, Geneva, sans-serif; font-size: 12px; height: 30px; line-height: 30px; background: #00509b; text-align: center; padding: 0 30px; } nav ul li a:hover { background: #000; color: #fff; } /* remove the list style */ #nav { margin:0; padding:0; list-style:none; } /* make the LI display inline */ /* it's position relative so that position absolute */ /* can be used in submenu */ #nav li { position: relative !important; } /* this is the parent menu */ #nav li a { } #nav li a:hover { } /* you can make a different style for default selected value */ #nav a.selected { } /* submenu, it's hidden by default */ #nav ul.set1 { position:absolute; left:0; display:none; margin: 0 0 0 0; padding:0; list-style:none; } #nav ul ul { position:absolute; top:0; display:none; margin: 0 0 0 0; padding:0; list-style:none; } #nav ul li { position:relative; z-index:500; float: none !important; height: auto; background-image: none; text-align: left; } /* display block will make the link fill the whole area of LI */ nav #nav ul a { display:block; color: #fff !important; border-bottom: 1px solid #555; text-align: left; padding-left: 20px; font-size: 12px; } nav #nav ul a:hover { color: #fff !important; border-left: 1px solid #fff; } /* fix ie6 small issue */ /* we should always avoid using hack like this */ /* should put it into separate file : ) */ *html #nav ul { margin:0 0 0 -2px; } ul#nav li:hover a, ul#nav li ul a { background: #000 !important; } body#about a.btn-about, body#our-businesses a.btn-businesses, body#investor-relations a.btn-investor, body#careers a.btn-careers, body#media a.btn-media, body#sustainability a.btn-sustainability, body#contact a.btn-contact { background: #000 !important; color: #fff !important; } nav #nav ul.longMenu a { width: 200px; } #nav ul.set1 li a { background-color: #111 !important; } #nav ul.set1 li a.withSub { background: #111 url(../_images/arrow_right.gif) right 50% no-repeat !important; } #nav ul.set1 li a.withSubLeft { background: #111 url(../_images/arrow_left.gif) left 50% no-repeat !important; } #nav ul.set2 li, #nav ul.set2 li a { background: #222 !important; color: #f5f5f5 !important; }