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 - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -