Príklad použitia:
Súbor style.css:
Kód:
body {
margin : 10px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}
#menu {
border-bottom : 1px solid #ccc;
margin : 0;
padding-bottom : 19px;
padding-left : 10px;
}
#menu ul, #menu li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
}
#menu a:link, #menu a:visited {
background : #E8EBF0;
border : 1px solid #ccc;
color : #666;
float : left;
font-size : small;
font-weight : normal;
line-height : 14px;
margin-right : 8px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
#menu a:link.active, #menu a:visited.active {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
#menu a:hover {
color : #f00;
}
body.section-1 #menu li#nav-1 a,
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
#menu #subnav-1,
#menu #subnav-2,
#menu #subnav-3,
#menu #subnav-4 {
display : none;
width: 90%;
}
body.section-1 #menu ul#subnav-1,
body.section-2 #menu ul#subnav-2,
body.section-3 #menu ul#subnav-3,
body.section-4 #menu ul#subnav-4 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}
body.section-1 #menu ul#subnav-1 a,
body.section-2 #menu ul#subnav-2 a,
body.section-3 #menu ul#subnav-3 a,
body.section-4 #menu ul#subnav-4 a {
background : #fff;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
#menu ul a:hover {
color : #f00 !important;
}
#contents {
background : #fff;
border : 1px solid #ccc;
border-top : none;
clear : both;
margin : 0px;
padding : 15px;
}
Súbor index.html:
Kód:
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<ul id="menu">
<li id="nav-1"><a href="#">Home</a></li>
<li id="nav-2"><a href="#">About Us</a>
<ul id="subnav-2">
<li><a href="#">People</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Locations</a></li>
</ul>
</li>
<li id="nav-3"><a href="#">Contact Us</a>
<ul id="subnav-3">
<li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Carrier Pigeon</a></li>
</ul>
</li>
<li id="nav-4"><a href="#">Products</a>
<ul id="subnav-4">
<li><a href="#">Death Ray</a></li>
<li><a href="#">Bunny Slippers</a></li>
<li><a href="#">Bag of Broken Glass</a></li>
</ul>
</li>
</ul>
Viac info:
http://www.cssportal.com/horizontal-menus/kalsey.htm