Html Navigation Bar Design in HTML5 and pre-HTML5 | HTML導覽列設計

The <nav> tag is new in HTML5, so we can create it as below:


<nav> 
    <a href="#">Nav Link 1-1</a> 
    <a href="#">Nav Link 1-2</a>
    <a href="#">Nav Link 1-3</a>
</nav>

But, if you want to display the Navigation Bar before HTML5(like HTML4.01, ). In the other words, you must display one in a lower version of browser.

Try the way as below, work with CSS:


.nav2 ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden;
} 
.nav2 li { 
    display: inline; 
    float: left;
} 
.nav2 a { 
    text-align: center; 
    display: block; 
    width: 90px; 
}

then construct a <ul>+<li> list:


<div class="nav2"> 
    <ul>
         <li><a href="#">Nav Link 2-1</a></li>
         <li><a href="#">Nav Link 2-2</a></li> 
         <li><a href="#">Nav Link 2-3</a></li> 
   </ul>
</div>