You may need to create a Web site with a horizontal menu close to the top of the document. In this case you can follow the next steps:
1. Prepare a list which you will use as menu. You can use the next test.html file as example.
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to use a structural list as a navigation menu with CSS</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Products and services</a></li>
<li><a href=”#”>Solutions</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Store</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Training</a></li>
<li><a href=”#”>Partners</a></li>
<li><a href=”#”>About</a></li>
</ul>
</div>
</body>
</html>
2. Style the ID navigation to give some basic font information. In a CSS layout, this ID would probably also contain some properties to determine the navigation’s position on the page.
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
3. Style the <ul>, by removing the list bullets and default indentation applied to the list by the browser.
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
4. Set the display property to inline. The property transforms our list from vertical to horizontal.
#navigation li {
display: inline;
}
5. Style the links for our navigation.
#navigation a:link, #navigation a:visited {
padding: 3px 10px 2px 10px;
color: #FFFFFF;
background-color: #0101DF;
text-decoration: none;
border: 1px solid #0B0B61;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #0B0B61;
}
The next picture shows the result:
Using of lists to make a horizontal menu with CSS