Home/ Questions/Q 8901587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T01:23:44+00:00

Hi Experts, I have a requirement in which I have to create a hover

  • 0

image for 1st problem

image for 2nd problem

Hi Experts,

I have a requirement in which I have to create a hover menu which expands up to 3 levels for IE8, I mean 1st level is top level when you hover your mouse on first level you will see 2nd level and again on hovering on 2nd level you will see the 3rd level.

As i have not done anything like this before and also I am not very good with CSS so I wrote a very basic code which has 2 major issues which I’d like you experts to look into.

1. On the top level navigation when I hover mouse over the last tab , some part of the 2nd level hover menu float out side the window creating a horizontal scroll on the page. And further when I hover the mouse over the 2nd level I can’t see 3rd level because it too float further ahead creating even bigger horizontal scroll.
Please refer image 1.jpg.

2. Some of my links in 2nd and 3rd level menus are floating outside the border of UL tag.
Please refer image 2.jpg

Here is my JSP:–

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

<%@ taglib uri="NavigationTagLibrary" prefix="nav"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">

TLNHover = function(){

    alert('inside TLNHover 2 nowrap style added');

    if (!document.all) return; // continue only for IE

    var cssRule;

    var newSelector;

    for (var i = 0; i < document.styleSheets.length; i++){

        for (var j = 0; j < document.styleSheets[i].rules.length ; j++){

            cssRule = document.styleSheets[i].rules[j];

            if (cssRule.selectorText.indexOf("LI:hover") >= 0){

                newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");

                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);

            }

        }

    }




    var getElm = document.getElementById("navigation").getElementsByTagName("LI");

    for (var i=0; i<getElm.length; i++) {

        getElm[i].onmouseover=function() { this.className+=" iehover"; } 

        getElm[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); }

         }// end of for

}// end of functionn TLNHover

if(window.attachEvent) window.attachEvent("onload", TLNHover);

</script>
</head>
<body>

<%-- this is the main navigation section --%> 

<div id="hoverNav" style="background-color:#ffffff;height:30px;"> 
<ul id="navigation">

<%-- iterate level 1 navigation nodes --%> 

<nav:iterateInitialNavNodes> 

<li class="header"><a class="headanchor">

<nav:navNodeAnchor navigationMethod="byURL" anchorAttributes="style='text-decoration: none;color:#000;font-weight: bold;'" />

</a> 

<%-- check child nodes --%> 

<nav:ifNavNodeHasChildren> 

<ul class="sub"> 

<%-- iterate level 2 --%> 

<nav:iterateNavNodeChildren> 

<%-- check child nodes level 3--%> 

<nav:ifNavNodeHasChildren> 

<li >

<a class="fly" ><nav:navNodeAnchor navigationMethod="byURL"/>

</a> 

<ul > 

<%-- iterate child nodes level 3--%> 

<nav:iterateNavNodeChildren> 

<li>

<a>

<nav:navNodeAnchor navigationMethod="byURL" />

</a>

</li> 

</nav:iterateNavNodeChildren> 

</ul> 

</li> 

</nav:ifNavNodeHasChildren> 

<nav:ifNotNavNodeHasChildren> 

<li >

<a>

<nav:navNodeAnchor navigationMethod="byURL"/>

</a> 

</li> 

</nav:ifNotNavNodeHasChildren> 

</nav:iterateNavNodeChildren> 

</ul> 

</nav:ifNavNodeHasChildren> 

</li>

<b>&nbsp;&nbsp;&nbsp;</b> 

</nav:iterateInitialNavNodes> 

</ul>

 </div>


</body>
<script type="text/javascript"> TLNHover; </script>
</html>

Here is my CSS:–

/* “navigation” is the id of first level UL Tag */

#navigation {z-index:100;background-color:#ffffff;position: absolute; list-style:none;margin-left:5px;-moz-margin-start:0px;padding-left=2px;margin-top:5px;}

#navigation li.header{width:5em;padding-left: 10px;padding-right: 10px;margin-right:2px;white-space: nowrap; border:1px solid #ffffff; background-color:#E0E0E0;display: -moz-inline-stack; display: inline-block; float:left;height:25px;text-decoration:none;font-family:Arial;font-style:normal;font-size:13px;font-color:#000000;}

#navigation li.header a.headanchor{text-decoration: none; height: 20px;position: absolute;font-color:#000000; }

#navigation li:hover a.headanchor{text-decoration:none;position: absolute;font-color:#ffffff;}



#navigation li:hover {position:relative;z-index:100;font-weight: bold;font-color:#ffffff;}

#navigation li:hover ul.sub {width: 15em;}

#navigation li:hover ul.sub {left:0px; right:1px; top:23px; background: #E0E0E0; z-index:300;border:1px solid #5c731e;height:auto;}

#navigation li:hover ul.sub li:hover {padding: 0;}

#navigation li:hover ul.sub li {left:10px;right:5px;background: #E0E0E0;font: 0.5em Arial; color:#000000; font-size: 1em; position:relative;width:10em;height: 25px;}

#navigation li:hover ul.sub li a{position: absolute;z-index:200; font: 0.4em Arial; text-decoration:none;color:#000000; font-size: 1em;width: 15em;}

#navigation li:hover ul.sub li a:hover {width:15em}

#navigation li:hover ul.sub li a:hover {position:relative;height:auto;}

#navigation li:hover ul.sub li a.fly:hover {width:15em}

#navigation li:hover ul.sub li a.fly:hover{position:relative;z-index:300;color:#ffffff;height:auto;}


#navigation li:hover li:hover ul {left:100 px; top:12px;bottom: 2px; background: #E0E0E0; border:1px solid #5c731e;display: block; width:15em;position:absolute; z-index:400; text-decoration:none;height:auto;}

#navigation li:hover li:hover ul li {padding: 0;}

#navigation li:hover li:hover ul li a {display: inline-block; padding: 0; }


#navigation ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;text-decoration:none;height:auto;display: block;border:1px solid #5c731e;}

Thanks in advance,
Best Regards,
Abhijt

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Now Replace some css properties

    as like this 

    #navigation li:hover ul.sub li {
    background: none repeat scroll 0 0 #E0E0E0;
    color: #000000;
    display: block;  // add this line
    font: 1em Arial;
    position: relative;
    width: 10em;  // remove this line
 }

#navigation li:hover ul.sub li a {
    color: #000000;
    display: block;  // add this line
    font: 1em Arial;
    padding-left: 14px;// add this line
    position: absolute;// remove this line
    text-decoration: none; 
    white-space: normal;// add this line
    width: 15em;// remove this line
    z-index: 200; // remove this line
margin-top:10px;// add this line
margin-right:10px;// add this line

}

    Live Demo

    • 0