Simple Drop Down Navigation

The navigation bar is one of the most crucial parts of website design because it allows the user to easily move from one page of the website to another. However, when dealing with a website that has many different pages it is a good idea to nest links in the a drop down menu to prevent the primary navigation bar from becoming too cluttered.

In this tutorial you will learn how to set up a simple drop down menu, and use CSS3 properties to enable the links to appear once the parent link is activated by a hover.

 

Setting up the HTML

The navigation bar is typically listed in the header tags <header> because it stays at the top of the webpage. The HTML for the navigation bar will be structured as an unordered list <ul> within the <nav> . Each link will be a list item <li> in the unordered list. Note that because each list item is a link to another page, it will need to have the <a href=”url”>name</a> tags inside the list item tags.

<header>
<nav>
  <ul>
    <li><a href="url here">Home</a></li>
    <li><a href="url here">About</a></li>
    <li><a href="url here">Portfolio</a></li>
  </ul>
</nav></header>

 
Then, to add the drop down options to the primary menu, you will add another unordered list nested  in one of the main list items. Each new unordered list will need to be given a class, such as “sublist” or “subsublist”, to be used in the CSS styling. Below is a sample with two nested lists; one that will appear when the parent link “Portfolio” is hovered over, and one that will appear when “Illustrations” is hovered over.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a>
    <ul class="sublist">
      <li><a href="#">Packaging</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Illustration</a>
        <ul class="subsublist">
          <li><a href="#">Digital</a></li>
          <li><a href="#">Painting</a></li>
          <li><a href="#">Pencil</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

 

Setting up the CSS

Once you have the HTML document set up, it’s time to style the navigation bar. It is always good to set the style for the HTML selectors in the order they appear in the HTML document. For this example we first set the CSS properties for the header, nav, list items, and links, as seen below.

header {
  width:100%;
  background: black;
  float:left;
  height:30px;
  line-height:30px;}

nav {
  position:relative;
  margin:-16px auto;}

li {
  position:relative;
  float:left;
  font-size:14px;
  width:90px;
  text-align:center;
  border-right:1px solid #ccc;}

li:first-child {
  border-left:1px solid #ccc;}

a {
  color:gray;
  text-decoration:none;}

a:hover {
  color:#fff;}

 

After the main navigation bar is styled, you will want to style the first dropdown list and list items by using the class selector “sublist”. This is where you will need to set the opacity to “0” and the visibility to “hidden”, so that the list does not appear and cannot be clicked on until you set the hover selector.

.sublist {
  float:left;
  list-style:none;
  padding:0;
  position:absolute;
  left:0px;
  top:31px;
  background:black;
  width:90px;
  opacity:0;
  visibility:hidden;}

.sublist li {
  border:none;
  border-bottom:1px solid #ccc;
  margin-top:-15px;
  margin-top:0;
  padding:0;
  width:90px;}

 

Then you will use the “:hover” selector to change the opacity back to “1” and visibility back to “visible” so that the list will appear when the main list item, “portfolio”, is hovered over.

li:hover .sublist {
  opacity:1;
  visibility:visible;}

 
Lastly, you will repeat the same styling steps for the “subsublist” class. However this time you will position it so the list will appear to the right of the parent element, in this case “Illustrations”.

ul.subsublist {
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:61px;
  top:0px;
  background:#222;
  width:90px;
  opacity:0;
  visibility:hidden;}

ul.subsublist li{
  border:none;
  border-bottom:1px solid #ccc;
  clear:both;
  margin:0;
  padding:0;
  width:90px;
  opacity:1;}

.sublist li:hover .subsublist {
  opacity:1;
  left:91px;
  visibility:visible;}

 
Now that you know the basics of setting up a drop down navigation bar, you can more styling, or even add css transitions to give your menus a more polished look.

Below is the codepen demo for this tutorial.

See the Pen pvxopp by Kelsey M (@KelseyNicoleM) on CodePen.

 

References:

http://www.alessioatzeni.com/blog/css3-dropdown-menu/

http://weebtutorials.com/2012/08/css3-navigation-menu-tutorial/

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>