CSS Vertical Menu sub-levels

In this article we are going expand on the Hover Menu’s without Images Tutorial I did yesterday By adding pop out sub-level menu’s. We will be expanding on the existing menu so if you don’t know how to create a vertical css menu or need the code please familiarise yourself with that tutorial before proceeding.

First step like last time is the HTML side of the coding. We need to embed another unordered list inside the list items from our previous menu. When we have place this list inside the other it should look something like this:

<div id="verticalmenu">
  <ul>
    <li><a href="#">menu item 1</a>
      <ul class="sublevel">
        <li>submenu item 1</li>
        <li>submenu item 2</li>
        <li>submenu item 3</li>
      </ul>
    </li>
    <li><a href="#">menu item 2</a>
      <ul class="sublevel">
        <li>submenu item 1</li>
        <li>submenu item 2</li>
        <li>submenu item 3</li>
     </ul>
   </li>
   <li><a href="#">menu item 3</a></li>
   <li><a href="#">menu item 4</a></li>
   <li><a href="#">menu item 5</a></li>
  </ul>
</div>

Notice how the new <ul> tags are inside the <li> tags of the old list. This is where they need to be to work. Also note that I have assigned a new class to these lists inside these lists. We need to do this to all sub-menu’s from here on in including and menus inside of these menu’s.

Our next step is create our new anchor class in css and its hover state as well. We will begin by hiding the sub lists when not in use:

ul .sublevel {
    display: none;
}

That was easy. Now we need to make our menu appear when we hover over it but want to make it appear offset to the right and slightly down from our main menu item.

li:hover .sublevel{
  display: block;
  position: relative;
  left: 75px;
  top: -27px;
  z-index: 101;
  height: 32px;
  width: 300px;
}

Now when we hover over a menu item that has a sub menu the sub menu pops out. To get the positioning where you want it you will need to play with the left and top properties. Also without a background it doesn’t look very good so now we are going add that. We add this to the sublevel class li tags.

.sublevel li{
  background-color: #1a82f7;
  /* fallback image */
  background-image: url(images/fallback-gradient.png);
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#2F2727, #1a82f7);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#2F2727, #1a82f7);
  -moz-border-radius: 15px;
  border-radius: 15px;
  display: block;
  height: 32px;
  margin-bottom: 5px;
  padding-left: 10px;
}
.sublevel li:hover{
  -moz-border-radius: 15px;
  border-radius: 15px;
  display: block;
  height: 32px;
  margin-bottom: 5px;
  padding-left: 10px;
  background-color: #FFFFFF;
  /* fallback image */
  background-image: url(images/fallback-gradient-hover.png);
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(#2F2727, #ffffFF);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffFF), to(#2F2727));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(#2F2727, #ffffFF);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(#2F2727, #ffffFF);
}

For now I am just using the same color gradients etc. that I used in the last article. Hover ever it is good practice to use a slightly though not vastly different color scheme on sub-menu items. To this it is a simple matter of changing the color codes and the fallback image to something that suits you.