Galactic Civilizations 3
Create a dynamic menu in CSS

Create a dynamic menu in CSS

Category: Javascript.
Posted by on the 29/11/2013.
Last update on the 06/12/2013.


This tutorial explains how to create dynamic menu in CSS.


This tutorial can be realized with a simple text editor like « Notepad ». This tutorial doesn't require any prerequisite.

HTML code

First of all, we will create a three level menu in HTML by using « ul » and « li » tags. Here is the code of the menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
rel="stylesheet" media="screen" type="text/css" title="menu" href="menu.css" />
menu in CSS</title>
element level 1
        <ul class="level2">
element level 2
                <ul class="level3">
element level 3</li>
element level 3</li>
element level 2</li>
element level 2</li>

    </li><li>element level 1

As you can see, the creation of the menu is quite simple. Each level of the menu has a class (level1, level2 and level3). The rules that will be defined in the CSS style sheet that allow having a multi-levels menu will be applied on these classes.

The CSS file is included on the top of the file with the HTML tag « link ».

CSS style sheet

Now we can work on the visual aspect of our menu. Here is the code of the file menu.css :

.level1 li{
    position: relative;
    float: left; /*Put the level 1's elements in line.*/
    list-style-type: none;
    min-width: 10%;
.level2, .level3{
    position: absolute; /*Put the block one below the other.*/
    display: none; /*Hide the block.*/
    min-width:100%; /*The levels 2 and 3 take the width that they need.*/
    padding:0%; /*Remove the right shift.*/
    position: relative; /*Allow to shift the level 2 blocks.*/
.level1:hover .level2, .level2:hover .level3{
    display: block;
.level2 li{color:blue; }
.level3 li{color:green; }

We have hidden the levels with the property « display: none; ».

The pseudo-class :hover allows displaying the level 2 and 3 when the user flies over the level 1 or the level 2. I will not explain the other rules because the comments in the code are enough to understand their usage. Furthermore, they are only used to have a more beautiful menu.

You like this tutorial ?
Like this website in order to promote it on facebook !

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo