Thanks to Eric Meyer for inspiration.
There are two versions:
This is a demonstration of a horizontal navigation list or menu, which pops up a vertical drop-down menu when hovered.
The HTML codes are very simple, as follows:
<ul class="nav">
<li><strong>a navigation item</strong>
<ul>
<li>a navigation list item</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li><strong>a navigation item</strong>
<ul>
<li>another navigation list item</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>...</li>
...
</ul>
The ul tag is assigned with the class of nav. That's the only class needed to be refered from the style sheet. The CSS codes are shown below, with comments:
/*** Nav bar styles ***/
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
ul.nav>li:hover{
padding-right: 1px;
} [*]
ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
/*When hovered, make them appear*/
display : block;
}
.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}
/*** Menu colors (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
This "block" version is obviously similar to the above one but the little difference lies in the width of the list label items. The whole navigation bar has a width of 100% as each label item always has similar width too, even if the browser window is resized, regardless of how much the numbers of label items are.
The codes are exactly the same as the "inline" version but with some minor additions to the ul.nav selector:
ul.nav{
display: table;
/*Just add the following properties and values*/
width: 100%;
table-layout: fixed;
}
Please note that the look of the navigation bar can be changed and modified with a few tweaks into the codes based on your knowledge of (X)HTML and CSS with some trial and error experiments.
One of the disadvantages of this navigation bar is that currently it's only limited to two-level navigational list, not more than three as it might break the whole layout. Also, display: none is not friendly for screen readers.
There are also other quite similar CSS test cases:
* The padding-right property has been removed due to the rendering tested on Mozilla Firefox 1.0, compared to the previous builds.