Simple CSS menu

Creating menu for my website with only CSS without any javascript. It is very simple and we need a set of <ul> ,<li> ,<div> and off-course <a> tags along with CSS selectors.

 In this article I have written about single level vertical menu.  Following is the combination of un-ordered list and <li> tag.

This is the basic structure is used in the current menu.

<div id="menu_container">

<ul >

   <li > <a href="#">Home</a>
        <ul >
               <li><a href="#">Test 1</a></li>
               <li><a href="#">Test 2</a></li>
         </ul>
   </li>
   <li ><a href="#"> Article</a>
           <ul >
                  <li ><a href="#" >Test 1</a></li>
                 <li><a href="#">Test 2</a></li>
           </ul>
   </li>
   <li ><a href="#">Blog</a>
          <ul >
                 <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
          </ul>
    </li>
     <li > <a href="#">About</a>
             <ul >
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
             </ul>
      </li>
</ul>
<div>

The above structure is simple un-ordered list and will look like as follow:

Now we need to define the CSS to create a simple single level verticle menu.

 1. First thing is to define the menu container.
Following CSS id will define the height and width of the entire menu.

   #menu_container

   {width: 100px; height: 20px}

2. Remove the bullets that come with the ul  and li tags and that too for tags enclosed in the menu container.

  #menu_container ul,
  #menu_container ul li,
  #menu_container ul ul
  {
     list-style: none;
    }

3. Following CSS element group will decide the how the menu will look like.

   #menu_container ul li
   {
      padding:0px 0px 5px 5px; //padding for the menu
      background-color: #E44d2e;
      border-bottom: solid 1px;
      height: 30px;
      width: 100px;
      float: left;
     display: inline;
     cursor:pointer;
   }

4. Following class will define the style for the anchor tag. We need to remove text decoration to decide custom style for the text.

   #menu_container ul li a
   {
       color: white;
       padding-left: 2px;
      font: bold 12px/32px Arial, sans-serif;
      text-decoration: none;
      height: 30px;
      width: 100px;
   }

5.  Following class will define the hover effect for the main menu.

  #menu_container ul li:hover
  {
     padding:0px 0px 5px 5px;
     background-color: #E14000;
     border-bottom: solid 2px;
     height: 30px;
     width: 100px;
     float: left;
    display: inline;
  }

6. After completing the main menu, we need to set the style for the sub-menus present in our menu structure.
    Following class will define sub menu style.

   #menu_container ul li ul
   {
      position: relative;
      float: right;
      border-bottom: solid 1px;
      border: 0px;
      height: 0px;
     overflow: hidden;
      display:none;
  }

For this we need to keep the display none so that they will be displayed only on mouse is hovering over the menu.

7. The finally creating the hover effect for the sub menu.

    #menu_container ul li:hover > ul
    {
        margin:  0px 0px 0px 5px;
        height: auto;
        padding: 0px 0px 0px 0px;
        display:block;
        background-color: #f9e5cc;
        color: black;
        left: 105px;
        top: -32px;
        position:relative;
       float: right;
   }

For the sub menus position should be relative, this will help to display the sub menu at exact next position of the main menu. display in the above class is set to block to display the menu whenever the mouse is on the main menu containing the sub-menu.

Following is the final output of the code above.

• Home
  • Test 1
  • Test 2
• Article
  • Test 1
  • Test 2
• Blog
  • Test 1
  • Test 2
• About
  • Test 1
  • Test 2