i have designed a menu list program in which i'm facing a problem where the last li item (white crappie) shifts down when i hover mouse pointer to just above li item (ozrack bazz) of white crappie instead (white crappie) li item should be to be sticked just below (ozrack bazz) li item without a down shift.
i request u all to kindly sort the problem.
i have send menu_css.html file along with the layout.css file.
thanks
html file:
css file:
i request u all to kindly sort the problem.
i have send menu_css.html file along with the layout.css file.
thanks
html file:
Code:
<html>
<head>
<script language="JavaScript" type="text/javascript">
window.onload = activateMenu;
function activateMenu() {
/* currentStyle restricts the Javascript to IE only */
var navroot = document.getElementById("nav");
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
//alert(lis.item(0).lastChild.tagName);
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis.item(i).lastChild.tagName=="UL"){
/* assign the function to the LI */
lis.item(i).onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis.item(i).onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
</script>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>this is test menu</p>
<br />
<ul id="nav">
<li >Sunfishes
<ul >
<li><a href="">Blackbanded»sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a>
<ul class="pg">
<li class="ed">a</li>
<li class="er">b
<ul>
<li class="aq">m</li>
<li class="wa">n</li>
</ul>
</li>
<li class="eq">c</li>
</ul>
</li>
<li class="sd"><a href="">White crappie</a></li>
</ul>
</li>
<li >Grunts
<ul >
<li><a href="">Smallmouth grunt
</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>
<li >Remoras
<ul >
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>
</body>
</html>
Code:
ul {
padding:0;
margin:0;
list-style: none;
}
a {text-decoration:none;}
li {
float: left;
position: relative;
width: 180px;
}
/*li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}*/
#nav ul, #nav ul ul, #nav ul ul ul{
display:none;
position:absolute;
top: 1em;
left: 0;
}
/*#nav {
display: none;
position: absolute;
top: 1em;
left: 0;
}*/
li > ul {
top: auto;
left: auto;
}
/*#nav li:hover ul { display:block; } */
#nav li:hover ul ul, #nav li:hover ul ul ul{ display:none; }
/*#nav ul li:hover ul {
display: block;
}*/
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
display:block;
top: auto;
left: auto;
position:relative;
}
.pg {padding-left:140px;}
/*ul li:hover ul {display: block;}*/
.ed {display:block;top:-18px;left:-20px;}
.er {display:block;top:-18px;left:-20px;}
.eq {display:block;bottom:20px;left:-20px;}
#nav li.sd {padding-top:-10px;}
.aq {display:block;top:-18px;left:20px;}
.wa {display:block;top:-18px;left:20px;}
.sd {display:block;}