A linked menubar
A menu starts with thediv id or div classtag and then uses the <ul> tags.
Each list item starts with the <li> and ends with</li> tags.
The list items are marked with dots until you use the text-decoration: none; tag in the header or CSS.
Here is the HTML markup:
<div id=”nav”>
<ul>
<li><a href=”#”>List item</a></li>
<li><a href=”#”>List item</a></li>
<li><a href=”#”>List item</a></li>
</ul>
</div>
Here is the CSS styles:
padding: 0;
width: 810px;
float: left;
margin: 10px;
border-bottom: 1px solid #999;
}
#nav ul {
display:block;
list-style:none outside none;
margin:0;
padding:0;
}
#nav ul li {
float:left;
font-weight:bold;
margin:5px;
padding:0;
font-size:14px;
}
#nav ul li a{
color:#999;
}
A linked Subnav menu
Like the abouve van bar, a subnav menu starts with thediv id or div classtag and then uses the <ul> tags.
Each list item starts with the <li> and ends with</li> tags.
The list items are marked with dots until you use the text-decoration: none; tag in the header or CSS.
Here is the HTML markup:
<ul>
<li><a href=”#”>List item</a></li>
<li><a href=”#”>List item</a></li>
<li><a href=”#”>List item</a></li>
</ul>
</div>
Here is the CSS style:
font-size:12px;
margin-top:8px;
width:200px;
}
#subnav ul {
list-style:none outside none;
margin:0;
padding:0 0 0 5px;
}
#subnav li {
float:left;
margin:0;
padding:2px 7px 4px;
width:200px;
}
#subnav ul li a {
color:#555555;
float:left !important;
margin:5px 10px 0 0;
padding:0;
text-decoration:none;
border-bottom:1px solid grey;
}
For more on this topic, read:
Beginning HTML, XHTML, CSS, and Javascript
Author: Jon Dockett
Chapter: 8 More Cascading Style Sheets
pages: 317-320