DropDown-menu

 In this article I tell how it’s possible to create DropDown-menu using pure CSS-document. This is kind a old thing now when article is out, but in one simple way this how it’s done.

What you need

Use notepad, Dreamweaver  or notepad++ to create the code and have two to three different browsers to check the results. I recommend using Opera, Chrome and Mozilla, because each time possibility of problems can be saw earlier.

Creating part

Time to start. Open your code-editor and make all basic settings. You should have this kind of result before editing body.

<!doctype html>
<html>
<head>
      <title>Dropdown Menu </title>
         <meta charsert:"utf-8">
         <meta name="author" content="Tuomas Törmä">
         <meta name="description" content="Dropdown Menu tutorial">
         <meta name="keywords" content="Tutorial">

         <meta http-equiv="refresh" content="300">
         <link href="styledmenu.css" rel="stylesheet" type="text/css">
</head>

After done this, lets go to body. If you are kind of newbie like, to tell you the truth, this might one of the easiest things to understand after all. Basically all menus can be done using list-styles. Usually it’s done using uncategorized list, means we use elements <ul> and <li> . In this article, we also use <a>-anchor (Also known as link) element to make links to different sites.

Let’s make easy list first. This is example:

<body>
    <ul>
        <li><a href="#empty">Home</a>
        <li><a href="#empty">My Works</a>
        <li><a href="#empty">Portfolio</a>
        <li><a href="#empty">Work Rates</a>
        <li><a href="#empty">Contact</a>
    </ul>
</body>
</html>

Here we have 5 main categories (Home, My Works, Portfolio, Work Rates and Contact.) and each of them has link. Notice, that this is only example, in real-life they should be a real sites. This means that you should make each of them own file, for example Home site should have index.html file and Contact could have contact.html file. Remember that #-mark doesn’t take you anywhere, except you make an anchor for it.

So to make a DropDown menu, you need sub-menus. How they are created? Well they are in a same way done. You will be using uncategorized list again. Here is an example what I meant.

<body>
 <ul>
   <li><a href="#empty">Home</a>
   <li><a href="#empty">My Works</a>
       <ul>
          li><a href="#empty">Portfolio</a>
          li><a href="#empty">Portfolio</a>
          li><a href="#empty">Portfolio</a>
       </ul>
   <li><a href="#empty">Portfolio</a>
   <li><a href="#empty">Work Rates</a>
   <li><a href="#empty">Contact</a>
 </ul>
</body>
</html>

Same goes on in different categories if you want. In this example I don’t add anymore sublist. So basically here is the HTML-part. Next is only CSS or if you prefer using <style> element rather than making a new file.

One thing to add to that would be adding this whole <ul>-lists inside of one <div> element. Then you can only manipulate in that precise <ul>-list. By using <div>-element, your CSS-file can be much cleaner looking.

CSS.file

So making CSS file is important that you name it right. If it’s wrong named, nothing will happen.

So this is all you need to do making a DropDown-menu.

ul {padding:0px;
    list-style:none;
   }
li {position:relative;
    float:left;
    padding-left:1px;
   }
ul a {display:table-cell;
      vertical-align:middle;
      width:150px;
      height:50px;
      text-align:center;
      text-decoration:none;
      font-family:tahoma;
      background-color:blue;
      color:white;
     }
ul a:hover {background-color:lightblue;
            color:black;
           }
li > ul {display:none;
         position:absolute;
         left:0px;
         top:100%;
        }
li:hover > ul {display:block;
              }

li > ul li {padding-top:2px;
           }

li > ul li > ul {left:100%;
                 top:0px;
                 padding:1px;
                }

li > ul li > ul li {width:150px;
                   }

li:hover > a {background-color:lightblue;
             }

This is the whole category only to make this happen. There are countless other ways to create same results, even better ones. For example, it could wiser to make sub list hide using this kind of script: ul > ul {position:absolute, visibility:hidden;} and ul li:hover ul {visibility:visible;} .
Basics using CSS is to make the all sublist hidden. More sublist, more work.

Results

You should have this kind of outcome. Using Mozilla firefox.

DropDown-menu using CSS

DropDown-menu using CSS

So to make it more cleaner use these

  • Use more colors (rgb and rgba colors recommend)
  • Add the navigation to own div-element
  • Try and err

-Tuomas Törmä

Sources

  • Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.

Leave a comment