sub menu

shan_cool · March 31, 2006

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:

<html>
<head>
<title>Horizontal CSS (cascading style sheet) Menu</title>
<link rel="stylesheet" type="text/css" href="../Styles/EXPack/Style.css">
<style>
#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;}
</STYLE>

<script>
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';
}
}
}
}
window.onload=startList;
</script>
</head>
<body>

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

<li><a class="submenu" name="submenu">HR</a>
<ul>
<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>

</li>
</ul>

</body>
</html>

Can anybody help me,
Thanks,
Shan_cool

moberemk · March 31, 2006

Just add a negative margin to the left of your ul tags to bring them into line.

Sign In

sub menu

Recommended Posts

shan_cool

Link to comment

Share on other sites

moberemk

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information