Learn VBA & Macros in 1 Week!

CSS - Add Another Submenu To A Css Dynamic Menu

Full Excel VBA Course - Beginner to Expert

Add Another Submenu To A Css Dynamic Menu	View Content

Hi ,
I followed this tutorials (http://matthewjamestaylor.com/blog/centered-dropdown-menus) and was successfully able to create a dynamic menu . At the moment the menu displays just one drop down and not multi submenus drop-downs. Can anybody tell me what can i add to implement something like ?

Tab1 Tab2
Link 1 > Link1.1
Link1.2
Link2 .

My css code is :-

body{behavior:;}
body{behavior:url(cssHoverFix.htc);}

/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #000; /* black line below menu */
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:90%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
}

/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:#ddd;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#000;
}
#centeredmenu ul li a:hover {
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#eee;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#36f; /* Sub menu items background colour */
color:#fff;
float:left;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}

Html Code is :--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<html>
<LINK REL=StyleSheet HREF="nat.css" TYPE="text/css" MEDIA=screen>

<body>
<div id="centeredmenu">

<ul>
<li><a href="#">Tab one</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">Tab two</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five is a long link that wraps</a></li>
</ul>
</li>
<li><a href="#">Long tab three</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">Tab four</a>
<ul class="last">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
</ul>
</div>

</body>

</html>

Regards,
Umair

Full Excel VBA Course - Beginner to Expert

Css Menu (add Submenu)

Similar Tutorials

CSS - Add Another Submenu To A Css Dynamic Menu

Add Another Submenu To A Css Dynamic Menu

Similar Tutorials

Css Menu (add Submenu)

Problem With Submenu In Dropdown Menu

Css Top Menu Moves When Submenu Is Displayed

Css/js Dynamic Menu

Dynamic Php Driven Css Tab Menu?

Handling Dynamic Lengths For Tab Menu!

Editing A Dynamic-fx Slide-in Menu

Frustrated On A Dynamic Image-based Menu

Css Nav - Submenu

Ul Submenu

Ie Submenu Color Bug

Submenu Hiding Behind Div In Ie

Getting The Position Of The Submenu Right

Submenu Displays Incorrectly In Ie 6 & 7

Help W/ :hover & Submenu Issue

Suckerfish Submenu Not Below Parent

Positioning Submenu Under Parentmenu

Submenu Width Not Equal Between Ie And Firefox

3rd Level Submenu Link Problem

Cant Prevent Bar From Appearing Over My Link In Submenu