Horizontal menu : Navigation Bar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Navigation Bar
Horizontal menu
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#header {
float: left;
width: 100%;
background-color: white;
padding-top: 0;
margin-top: 0;
background: #ccc;
}
#header h5 {
display: none;
}
#header ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#header li {
float: left;
margin: 0;
padding: 0;
}
#header a {
display: block;
}
#header li {
float: left;
background: yellow;
margin: 0;
padding: 0;
}
#header a {
display: block;
background: gold;
padding: 5px 15px;
color: #ccc;
text-decoration: none;
}
#header #current {
background: red;
}
#header #current a {
background: pink;
color: black;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="http://www.java2s.com">Home</a></li>
<li><a href="http://www.java2s.com">Home</a></li>
<li><a href="http://www.java2s.com">Home</a></li>
<li><a href="http://www.java2s.com">Home</a></li>
<li id="current"><a href="http://www.java2s.com">Home</a></li>
<li><a href="http://www.java2s.com">Home</a></li>
</ul>
</div>
</body>
</html>
Related examples in the same category