html - NavBar with CSS -
i have unordered list of links in xhtml. want make horizontal nav bar webpage using css2.1. however, when try make positioning of nav bar absolute, links stack on top of each other can't see them. made positioning relative. when shrink width of browser window, resizes should, don't want nav bar resize, because links stacking underneath each other not want. wondered if there easier way , if i'm doing wrong regards resizing conundrum.
xhtml
<div class="box" id="box1"> <h1>welcome</h1> <ul class="navlist" id="navbar"> <li><a href="#intro">intro</a></li> <li><a href="#howto">howto</a></li> <li><a href="#why">but why?</a></li> <li><a href="#faq">faqs</a> <ul class="navlist" id="sublist"> <li><a href="#letters">alphabet</a></li> <li><a href="#numbers">digits</a></li> </ul> </li> </ul> </div> css
.navlist li{ position:relative; top: -117px; left:25em; list-style-type:none; padding-left:0; margin-left:0; display: inline; } ul.navlist a{ color: #333; padding-right: 3px; padding-left: 3px; margin-right: 2px; text-decoration: none; } #navbar li ul{ position: absolute; width: 15em; left: -899em; } #navbar li:hover ul { left: -420px; top: 140px; }
Comments
Post a Comment