Css Course


In this tutorial you can learn how to create double level menus with CSS (horizontal, and vertical).
Double level menu means that the menu list contains another list with other links (a second Menu, or Sub-Menu).
Generally, the Menus are created with <ul> (or <ol>) and <li> tags.
- Assuming that you already know some CSS and HTML, apply /adapt the codes presented below, customizing them with more CSS elements to create the design you want (like rounded corners, background images, etc).


Double level Vertical Menu

Vertical menus ar usualy added in sidebar.
- The HTML, and CSS code bellow will create a double vertical menu (The CSS properties must be added in <head> area, or in a '.css' file):
<style>
#menuv {
 width:200px;
 border:1px solid blue;
 background-color:#daedfe;
 padding:2px;
}

 /* Properties for first level vertical menu */
#menuv li {
 margin:1px 0;
 background-color:#f0f1fe;
 padding:1px;
 list-style-type:none;
 font-weight:600;
 text-align:left;
}
#menuv li a {
 display:block;
 margin:0;
 font-weight:normal;
}
#menuv li a:hover {
 background-color:#fefefe;
 text-decoration:none;
 font-style:oblique;
}

 /* Properties for seccond level vertical menu */
#menuv li:hover ul {
 display:block;
}
#menuv li ul {
 display:none;
 position:relative;
 margin:-1px 0 -2px 0;
 padding:1px 0;
}
#menuv li ul li {
 margin:2px 0 0 20px;
 background-color:#edfeed;
 padding:1px 0;
 border:1px dotted yellow;
}
</style>

<h4>Example Double level Vertical Menu</h4>
<p>Move the mouse cursor over the following menu.</p>

<ul id='menuv'>
 <li><a href='/' title='Home'>Home</a></li>
 <li> + CSS Tutorials
 <ul>
 <li><a href='https://coursesweb.net/css/css3-new-background-properties_t' title='Border properties'>CSS3 Border properties</a></li>
 <li><a href='https://coursesweb.net/css/css3-opacity_t' title='opacity'>CSS3 opacity</a></li>
 </ul>
 </li>
 <li> + HTML Tutorials
 <ul>
 <li><a href='https://coursesweb.net/html/html5-quick-tutorial_t' title='HTML5 Quick Tutorial'>HTML5 Quick Tutorial</a></li>
 <li><a href='https://coursesweb.net/html/html5-canvas_t' title='HTML5 canvas Tutorial'>HTML5 canvas Tutorial</a></li>
 <li><a href='https://coursesweb.net/html/html5-new-tags_t' title='HTML5 New Tags'>HTML5 New Tags</a></li>
 </ul>
 </li>
 <li><a href='https://coursesweb.net/contact' title='Contact'>Contact</a></li>
</ul>
- The trick to this Menu it's this code (which makes the seccond UL list visible when the mouse is over its LI parent):
#menuv li:hover ul {
 display:block;
}

• Another variant of double level vertical menu:
<style>
#menuv {
 position:relative;
 width:160px;
 border:1px solid blue;
 background-color:#daedfe;
 padding:2px;
}

 /* Properties for first level vertical menu */
#menuv li {
 margin:1px 0;
 background-color:#f0f1fe;
 padding:1px;
 list-style-type:none;
 font-weight:600;
 text-align:left;
}
#menuv li a, #menuv li span {
 display:block;
 margin:0;
 font-weight:normal;
}
#menuv li a:hover {
 background-color:#fefefe;
 text-decoration:none;
 font-style:oblique;
}

 /* Properties for seccond level vertical menu */
#menuv li:hover ul {
 display:block;
}
#menuv li ul {
 display:none;
 position:absolute;
 z-index:9998;
 width:100%;
 left:151px;
 margin:-20px auto 0 auto;
 background-color:#daedfe;
 border:1px dashed blue;
 padding:1px;
}
#menuv li ul li {
 margin:1px;
 background-color:#edfeed;
 padding:1px 0 1px 2px;
}
</style>

<h4>Example 2 - double level vertical menu</h4>
<p></p>

<ul id='menuv'>
 <li><a href='/' title='Home'>Home</a></li>
 <li><span> + CSS Tutorials</span>
 <ul>
 <li><a href='https://coursesweb.net/css/css3-new-background-properties_t' title='Border properties'>CSS3 Border properties</a></li>
 <li><a href='https://coursesweb.net/css/css3-opacity_t' title='opacity'>CSS3 opacity</a></li>
 </ul>
 </li>
 <li><span> + HTML Tutorials</span>
 <ul>
 <li><a href='https://coursesweb.net/html/html5-quick-tutorial_t' title='HTML5 Quick Tutorial'>HTML5 Quick Tutorial</a></li>
 <li><a href='https://coursesweb.net/html/html5-canvas_t' title='HTML5 canvas Tutorial'>HTML5 canvas Tutorial</a></li>
 <li><a href='https://coursesweb.net/html/html5-new-tags_t' title='HTML5 New Tags'>HTML5 New Tags</a></li>
 </ul>
 </li>
 <li><a href='https://coursesweb.net/contact' title='Contact'>Contact</a></li>
</ul>
- The sub-menu (#menuv li ul) must have these CSS properties, to hide it, and to not affect the other lists when is displayed (the z-index:9998; makes it to be displayed over the other lists).
display:none;
position:absolute;
z-index:9998;
- In the CSS code of this Menu it is important that the #menu to have defined a 'position' (relative, absolute). This is necessary to make the z-index:9998; (in #menuv li ul) to work.

Horizontal-Vertical Menu

The horizontal-vertical menu is a Menu displayed on a horizontal line which contains vertical sub-menus. When the mouse is over the text /image of the horizontal Menu, it shows a second UL list with a vertical Menu that is initialy hidden.
- Code:
<style>
#menuv {
 position:relative;
 padding:2px;
}

 /* Properties for horizontal menu */
#menuv li {
 float:left;
 margin:1px 8px;
 border:1px solid blue;
 background-color:#daedfe;
 padding:1px 2px;
 list-style-type:none;
 font-weight:600;
 text-align:left;
 text-decoration:nderline;
}

 /* Properties for vertical menu */
#menuv li:hover ul {
 display:block;
}
#menuv li ul {
 display:none;
 position:absolute;
 margin:1px auto 1px -8px;
 background-color:#f0f1fe;
 border:1px dashed blue;
 padding:1px;
}
#menuv li ul li {
 position:relative;
 clear:both;
 width:99%;
 margin:1px 0;
 border:none;
 background-color:#edfeed;
 padding:1px;
}

 /* Links in sub-menu */
#menuv ul li a {
 display:block;
 margin:0;
 font-weight:normal;
 padding:1px;
}
#menuv ul li a:hover {
 background-color:#fefefe;
 text-decoration:none;
 font-style:oblique;
}
</style>

<h4>Example Horizontal-Vertical Menu</h4>
<p>Move the mouse cursor over Menu.</p>

<ul id='menuv'>
 <li><a href='/' title='Home'>Home</a></li>
 <li>CSS Tutorials
 <ul>
 <li><a href='https://coursesweb.net/css/css3-new-background-properties_t' title='Border properties'>CSS3 Border properties</a></li>
 <li><a href='https://coursesweb.net/css/css3-opacity_t' title='opacity'>CSS3 opacity</a></li>
 </ul>
 </li>
 <li>HTML Tutorials
 <ul>
 <li><a href='https://coursesweb.net/html/html5-quick-tutorial_t' title='HTML5 Quick Tutorial'>HTML5 Quick Tutorial</a></li>
 <li><a href='https://coursesweb.net/html/html5-canvas_t' title='HTML5 canvas Tutorial'>HTML5 canvas Tutorial</a></li>
 <li><a href='https://coursesweb.net/html/html5-new-tags_t' title='HTML5 New Tags'>HTML5 New Tags</a></li>
 </ul>
 </li>
 <li><a href='https://coursesweb.net/contact' title='Contact'>Contact</a></li>
In the CSS code of this Menu, the following properties are important:
- #menuv li must contains this property to make the list to be displayed horizontally:
float:left;
- The sub-menu (#menuv li ul) must have these CSS properties to hide it, and to not affect the other lists when is displayed.
display:none;
position:absolute;
- The lists of the sub-menu (#menuv li ul li) must have these CSS properties, that annulate the effect of the float:left; inherited from LI parent, and to have a properly width:
position:relative;
clear:both;
width:99%;

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Creating Double Level Menu with CSS

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (13767)
  2. PHP getElementById and getElementsByTagName (39721)
  3. Multiple Select Dropdown List with AJAX (17251)
  4. PHP-MySQL Scripts (5632)
  5. Get and Modify content of an Iframe (23454)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (494)
  2. Read Excel file data in PHP - PhpExcelReader (228)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (219)
  4. querySelector and querySelectorAll (209)
  5. Create simple Website with PHP (199)