Tutorial: Site Map with list

Using list for site map is better than using tables, because of its scalability!

Here’s a sample below;

css code

#menu_main {

background-color:green;
}

#menu_main ul {
border-left:1px solid black;
float:left;
font-weight:bold;
height:90px;
list-style:none outside none;
margin:0px;
padding: 0px 20px 5px 6px;
}

#menu_main ul li {
margin:0px;
padding:0px;
}

#menu_main ul li ul {
border:0 none;
float:none;
list-style:none outside none;
margin:0px;
padding:0px;
}

#menu_main ul li ul li {
font-weight:normal;
line-height:15px;
margin:0px;
padding:0px;
}

html code

<div id=”menu_main”>
  <ul>
   <li>Menu1</li>
  </ul>
  <ul>
  <li><a href=”/”>Menu2</a>
  <ul>
    <li><a href=”/”>Menu2-1</a></li>
    <li><a href=”/”>Menu2-2</a></li>
  </ul>
  </li>
  </ul>
  <ul>
   <li>Menu3</li>
</ul>
</div>