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

Popular posts from this blog

php - mySql Join with 4 tables -

css - Text drops down with smaller window -

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -