In today’s post you will be learning how to create a vertical CSS3 dropdown menu using HTML & CSS3. As you might of guessed, the menu will be built using CSS3 properties which may only be supported in the lastest browsers.

Vertical CSS3 dropdown menu demo & download

Take a look below to see how the menu will look when complete, or view the demo to see it in action. You can download all the necessary files below also.

Structuring the navigation menu is actually rather simple. First of all you create an unordered list, adding in any required list items. This initial list is used to structure the base menu. Let’s take a look at the HTML code.

Navigation menu structure

XHTML

1

2

3

4

5

6

7

8

9

10

<nav>

<ul>

<li><a href="#"><span></span> Home </a></li>

<li><a href="#"><span></span>About </a></li>

<li><a href="#"><span></span>Testimonials </a></li>

<li><a href="#"><span></span>Latest Offers </a></li>

<li><a href="#"><span></span>News </a></li>

<li><a href="#"><span></span>Contact us </a></li>

</ul>

</nav>

With the exception of the empty span elements there is nothing out of the ordinary here, just a standard unordered list nested within the new semantic ‘NAV’ tag introduced as part of the HTML5 spec. For those of you wondering about the span tag, just bear with me!

Step 1a: Add the HTML required to form a drop-down menu.

To create the drop-down menu some additional HTML is required. To be more specific, an additional unordered list needs to be nested within one of the list items. The altered code can be seen below.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<nav>

<ul>

<li><a href="#"><span></span> Home </a></li>

<li><a href="#"><span></span>About </a>

<ul>

<li><a href="#">Mission Statement </a></li>

<li><a href="#">Our Staff </a></li>

<li><a href="#">Our Promise </a></li>

<li><a href="#">Ethics &amp; Legal </a></li>

<li><a href="#">Future Goals </a></li>

</ul>

</li>

<li><a href="#"><span></span>Testimonials </a></li>

<li><a href="#"><span></span>Latest Offers </a></li>

<li><a href="#"><span></span>News </a></li>

<li><a href="#"><span></span>Contact us </a></li>

</ul>

</nav>

As mentioned above an additional unordered list has been added into the second list item. This will serve as the drop-down menu. If you preview your code in its current state it probably wont look a million dollars. In fact you should have something similar to the below image:

To achieve the drop-down effect some CSS is now required.

Step 2: Style the vertical drop-down menu.

To keep this simple the process will be broken down into a couple of steps. First of all let’s style the base menu, we can get to the drop-down styles afterwards.

/* Any child positioned absolutely will be positioned relative to this */

position:relative;

}

nav a {

color:#e8e8e8;

padding:12px0px;

/* Fill all available horizontal space */

display:block;

/* Remove underline */

text-decoration:none;

/*

New CSS3 animations:

apply transition to background property, taking 1s to change it

*/

transition:background1s;

-moz-transition:background1s;

-webkit-transition:background1s;

-o-transition:background1s;

font-family:tahoma;

font-size:13px;

text-transform:uppercase;

padding-left:20px;

}

nav a:hover {

/*

RGBA background for transparancy:

last number(0.05) is the transparency

*/

background:RGBA(255,255,255,0.05);

color:#fff;

}

Please refer to the comments within the code if you are uncertain – I’ve not added comments to every property as the majority of them are self explanatory however.

For those of you who are not familiar with CSS3, the transition property may be alien. It’s quite simple to use, simply define the property to which the transition should be applied along with a duration. Then add a ‘:hover’ rule to your stylesheet and make a change to the property defined in the transition.

Tip: Using the example above: Rather than use ‘background’ within the transition property it is possible to use ‘all’. The transition would then be applied to every property changed within the hover rule. Give it a go, try changing the width, height or padding.

Step 2a: Styling the drop-down tab.

With the base menu styled appropriately it is time to address the drop-down tab. There are 3 core steps to this process. First of all the tab needs to be positioned, then it needs to be hidden and finally it needs to be made visible again when a user hovers over its parent list item.

Take a look at the CSS below to see how this is done – again comments are included where necessary.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

nav ul li:hoverul{

/* When list item is hovered, display UL nested within. */

display:block;

}

navulul{

/* Remove element from document flow */

position:absolute;

/* Position relative to its parent &lt;li&gt; */

left:210px;

top:0;

border-top:1pxsolid#e9e9e9;

display:none;

}

navululli{

width:200px;

background:#f1f1f1;

border:1pxsolid#e9e9e9;

border-top:0;

}

navulullia{

color:#a8a8a8;

font-size:12px;

text-transform:none;

}

nav ul ul lia:hover{

color:#929292;

}

Take a look below for the intended result:

Step 3: Make the vertical css3 dropdown menu shine.

Remember those span elements I was talking about earlier? Well, it’s time to put them to use! At this point, i’m going to mix things up a little and show you the resulting image before the code. So, take a look below to see what we’re trying to achieve here.

The image doesn’t do the effect full justice as the icon rotates when hovered, but it should give you a good idea of what we’re trying to do… So let’s get started.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

navspan{

width:12px;

height:12px;

background:#fff;

display:inline-block;

float:left;

margin-top:3px;

margin-right:20px;

position:relative;

transition:all0.5s;

-moz-transition:all0.5s;

-o-transition:all0.5s;

-webkit-transition:all0.5s;

}

nava:hoverspan{

background:#7d2c41;

transform:rotate(90deg);

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

}

Pretty simple stuff, in fact the CSS above simply transforms the span elements into 12×12 squares and adds some simple animations using the transition property (this time the transition has been applied to all properties). In the ‘:hover’ rule the background color has been modified, and the square is rotated 90 degrees.

At the moment you should see something similar to the image below:

Almost there! We just need to separate those large squares into 4 smaller ones. This can be done using the pseudo selectors, before and after. The Code can be found below as always.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/*Horizontal line*/

nav span:before{

content:"";

width:12px;

height:2px;

background:#3a3b3b;

position:absolute;

left:0px;

top:5px;

}

/*Vertical line*/

nav span:after{

content:"";

width:2px;

height:12px;

background:#3a3b3b;

position:absolute;

left:5px;

position:top;

}

Using the aforementioned pseudo selectors it is possible to create (pseudo) elements without writing additional HTML markup. To separate the large squares into 4 smaller segments, one horizontal line and one vertical line are requried.

Using the ‘:before’ pseudo selector a horizontal line is created. The line is given a width identical to that of the square, and a height of 2px.Using absolute positioning we now need to vertically center the line. Some simple maths make this possible. The square is 12px high, the line is 2px high – leaving 10px. Divide that by 2 and you have the required offset. Apply the offset, 5px in this case to the ‘top’ property.

The process for creating the vertical line is identical so I won’t bother going over that.

Thanks for reading todays tutorial on how to create a vertical css3 dropdown menu, if you found the post useful please consider sharing it on your favourite social network! I would appreciate it very much.

About the Author

John Richardson: 26 years old, living in the UK. Currently works as a PHP Developer in North-East of UK.
Interested in HTML,CSS, Javascript, jQuery & PHP.