logo W3 Schools Basic Menu


Link to W3 Schools Menu.




HTML for W3 Basic Menu

<div id="menu_bar">
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</div>

CSS for W3 Basic Menu

#menu_bar ul{
background-color: #dddddd;
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
border: 1px solid #000;
}
#menu_bar a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid #000;
}
#menu_bar a:hover {text-decoration: underline;
background-color:#ff3300
}
#menu_bar li{
display:inline;
}