Jump to content


This topic is now archived and is closed to further replies.


sub menu

Recommended Posts

hi all,

I am implementing 3 level horizantal hierachy sub menu in my application all the levels works fine expect when i select 2 level and 3 level comes out but there is a gap between the 2 and 3 level hierarchy.

My code is as follows:

<title>Horizontal CSS (cascading style sheet) Menu</title>
<link rel="stylesheet" type="text/css" href="../Styles/EXPack/Style.css">
#menu ul {
margin: 0;
padding: 0;
list-style: none;

#menu li { /* all list items */
float: left;
position: relative;
width: 7.45em;

#menu li ul {/* second-level lists */
position: absolute;
display: block;
top: 2em;
left: 0;

#menu li>ul {/* to override top and left in browsers other than IE */
top: auto;
left: auto;

#menu li ul li ul {/* third-level lists */
position: absolute;
display: block;
top: 0;
left: 9em;

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */

#menu li:hover ul { display: block; }

#menu li:hover>ul { visibility:visible; }

#menu ul ul { visibility:hidden; }

/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;

/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: #777;
background: red; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
/* Hover Styles */
#menu ul a:hover {
color: #E2144A;
background: red;

/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: #77F;
background: #fff; /* IE6 Bug */
border: 1px solid #ccc;
padding: 5px;

/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: #E2144A;
background: #f9f9f9;

/* Icon Styles */
#menu li a.submenu {background:#fff url("arrow.gif") no-repeat right; }
#menu li a.submenu:hover {background:#f9f9f9 url("arrow.gif") no-repeat right;}
#menu li ul a.submenu {background:#fff url("arrow.gif") no-repeat right;}
#menu li ul a.submenu:hover {background:#f9f9f9 url("arrow.gif") no-repeat right;}

startList = function() {

//code only for IE
if(!document.body.currentStyle) return;
var subs = document.getElementsByName('submenu');
for(var i=0; i<subs.length; i++) {
var li = subs[i].parentNode;
if(li && li.lastChild.style) {
li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
li.onmouseout = function() {
this.lastChild.style.visibility = 'hidden';

<div id="menu">
<ul id="menuList">

<li><a class="submenu" name="submenu">HR</a>
<li><a class="submenu" name="submenu">Employee</a>
<ul ><li><a href="hr_info_entry.php">Add</a></li>
<li><a href="hr_info_modify.php" >Modify</a></li>
<li><a href="" >Delete</a></li></ul>
<li><a class="submenu" name="submenu">Passport</a>
<ul ><li><a href="hr_pass.php">Add</a></li></ul>
<li><a href="construct.php">Join</a>
<li><a href="construct.php">Increment </a>
<li><a href="construct.php">Time Sheet</a>
<li><a href="construct.php">Leave </a>
<li><a href="construct.php">Resignation</a>
<li><a href="hradmin.php">HR Admin</a>



Can anybody help me,

Share this post

Link to post
Share on other sites
Just add a negative margin to the left of your ul tags to bring them into line.

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.