shan_cool Posted March 31, 2006 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/6238-sub-menu/ Share on other sites More sharing options...
moberemk Posted March 31, 2006 Share Posted March 31, 2006 Just add a negative margin to the left of your ul tags to bring them into line. Quote Link to comment https://forums.phpfreaks.com/topic/6238-sub-menu/#findComment-22626 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.