We are now going to build a horizontal navigation menu with just HTML and CSS. In Part 1 we wrote the HTML snippet that we are using in both a vertical sidebar navigation and the horizontal bar navigation. In Part 2 we wrote the CSS styles needed for the vertical navigation.
#topnav{
width:100%;
height:30px;
background:#e5e5e5;
position:absolute;
top:100px;
left:0;
margin:0;
padding:0;
border:none;
}
/* We keep the style of ul the same for both vertical and horizontal navigation layouts */
#topnav ul{
width:100%;
list-style:none;
margin:0;
padding:0;
}
/*
We add a 1px margin at the right hand-side to create a vertical separator by having the background color applied to #topnav (#E5E5E5) bleed through.
*/
#topnav ul li{
position:relative;
margin:0 1px 0 0;
padding:0;
float:left;
clear:none;
display:inline;
}
/*
#topnav ul li a:visited selector help keep the navigation links style remain the same whether the page is visited or not. Otherwise your link text may turn purple. That behavior can be user-friendly for links in a text section but will look just awful.
*/
#topnav ul li a, #topnav ul li a:visited {
display:block;
height:30px; /* vertically centers the hyperlink text */
text-align:center; /* better than adding padding to left and right sides */
line-height:28px; /* vertical centering instead using padding to top and bottom sides. You can adjust this number as needed depending on the font used. */
color:#000;
background:#efefef; /* use a background color or background image to style these buttons */
text-decoration:none; /* removes the default underline */
}
#topnav ul li ul{
width:150px; /* default width for the sub-menus */
height:auto;
overflow:hidden;
border:1px solid #ccc;
position:absolute;
top:30px;
left:0;
display:none; /* hide the sub-menus by default */
z-index:1000; /* or any number to ensure the sub-menus will appear on top of every other element in the page. */
}
/* shows the sub-menu when the mouse is over the parent li element (i.e. li:hover) . This selector will inherit all the styles applied to #topnav ul li ul. So we only need to override the display property to show the sub-menu during the hover state of the parent <li> container */
#topnav ul li:hover ul{
display:block;
}
/*
List items in a sub-menu should be vertically aligned. So, the floating will be set to none so these block-level elements can revert to their default alignment: stacked vertically.
*/
#topnav ul li ul li{
float:none;
margin:0;
padding:0;
}
/* Sub-menu links */
#topnav ul li ul li a, #topnav ul li ul li a:visited {
display:block;
height:30px; /* redundant but just in case */
margin:0;
padding:0;
text-align:left; /* aligns sub-menu anchor text to the left */
text-indent:5px; /*adds a 5px spacing between anchor text and sub-menu left border */
text-decoration:none; /* redundant but just in case */
line-height:28px; /* redundant but just in case */
}
/* Because top level links such as home, services, … do not have the same number of text characters, it’s always a good idea to specify the width of each item proportionally to the amount of horizontal space needed. */
#topnav ul li#home{
width:80px;
}
#topnav ul li#services{
width:120px;
}
#topnav ul li#products{
width:120px;
}
#topnav ul li#contact{
width:80px;
}
#topnav ul li#testimonials{
width:150px;
}
#topnav ul li#about{
width:80px;
}
/* It’s also wise the specify the width for each sub-menu. It’s just a matter of general look-and-feel. */
#topnav ul li#services ul{
width:180px;
}
#topnav ul li#products ul{
width:200px;
}
The main differences between the vertical and horizontal navigation layouts are:
- the alignment of the top-level align items using the float property
- the positioning of the sub-menu both vertically and horizontally.
- the text alignment of the top-level links (centered) and the sub-links (left aligned)