0

第一个问题的图像

第二个问题的图像

嗨专家，

我有一个要求，我必须创建一个悬停菜单，该菜单最多扩展为3 个级别，因为IE8,我的意思是，当您将鼠标悬停在第一级时，第一级是顶层，您将看到第二级，再次悬停在第二级时，您会看到第 3 级。

因为我以前没有做过这样的事情，而且我对 CSS 也不是很好，所以我编写了一个非常基本的代码，其中有 2 个主要问题，我希望各位专家研究一下。

1.在顶层导航中，当我将鼠标悬停在最后一个选项卡上时，第二级悬停菜单的某些部分会浮出窗口，在页面上创建水平滚动。更进一步，当我将鼠标悬停在第 2 层上时，我看不到第 3 层，因为它太向前浮动，从而产生更大的水平滚动。请参考图片 1.jpg。

2.我在 2 级和 3 级菜单中的一些链接浮动在 UL 标记的边框之外。请参考图片2.jpg

这是我的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>

这是我的CSS :--

/* “导航”是id第一级 UL标签 */

#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;}

在此先感谢， 最好的问候， Abhijt

4

1 回答 1

1

现在替换一些css属性

像这样 

#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

}

现场演示

于 2012-11-27T09:50:30.530 回答