Jump to content

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,
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

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.