Question

当主要父菜单项悬停时，它将在遍历该项目的子菜单时保持活动状态，即使在子元素上方也是如此。但这不会发生，为什么？

JS

var mastertabvar = new Object()
mastertabvar.baseopacity = 0
mastertabvar.browserdetect = ""

function showsubmenu(masterid, id) {
    submenuobject = document.getElementById(id)
    mastertabvar.browserdetect = submenuobject.filters ? "ie" : typeof submenuobject.style.MozOpacity == "string" ? "mozilla" : ""
    hidesubmenus(mastertabvar[masterid])
    submenuobject.style.display = "block"
    instantset(mastertabvar.baseopacity)
    highlighting = setInterval("gradualfade(submenuobject)", 0)
}

function hidesubmenus(submenuarray) {
    for (var i = 0; i < submenuarray.length; i++)
    document.getElementById(submenuarray[i]).style.display = "none"
}

function instantset(degree) {
    if (mastertabvar.browserdetect == "mozilla") submenuobject.style.MozOpacity = degree / 100
    else if (mastertabvar.browserdetect == "ie") submenuobject.filters.alpha.opacity = degree
}

function gradualfade(cur2) {
    if (mastertabvar.browserdetect == "mozilla" && cur2.style.MozOpacity < 1) cur2.style.MozOpacity = Math.min(parseFloat(cur2.style.MozOpacity) + 0.1, 0.99)
    else if (mastertabvar.browserdetect == "ie" && cur2.filters.alpha.opacity < 100) cur2.filters.alpha.opacity += 10
    else if (typeof highlighting != "undefined") //fading animation over
    clearInterval(highlighting)
}

function initalizetab(tabid) {
    mastertabvar[tabid] = new Array()
    var menuitems = document.getElementById(tabid).getElementsByTagName("li")
    for (var i = 0; i < menuitems.length; i++) {
        if (menuitems[i].getAttribute("rel")) {
            menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
            mastertabvar[tabid][mastertabvar[tabid].length] = menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
            if (menuitems[i].className == "selected") showsubmenu(tabid, menuitems[i].getAttribute("rel")) menuitems[i].getElementsByTagName("a")[0].onmouseover = function() {
                showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
            }
        }
    }
}

CSS

.basictab{
    margin-left: 0px;
    list-style-type: none;
    margin-bottom: 0;
    text-align: center;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: gray;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding-right: 0px;
    padding-left: 0px;
    background-repeat: repeat-x;
    padding-top: 0px;
    padding-bottom: 7px;
    border-radius: 10px 10px 0px 0px;
}

.basictab li{
    display: inline;
    margin: 0px;
    background-image: url(../images/mainbar.png);
    background-repeat: repeat-x;
    background-color: rgba(0,51,0,1);
    background-position: left;
    border-radius: 50px 50px 0px 0px;
}

.basictab li a{
    margin-left: 0;
    background-color: rgba(0,0,0,1);
    color: rgba(255,255,255,1);
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: gray;
    border-right-color: gray;
    border-bottom-color: gray;
    border-left-color: gray;
    text-decoration: none;
    background-image: url(../images/mainbar.png);
    border-radius: 15px 15px 0px 0px;
}


.basictab li a:visited{
    color: rgba(255,255,255,1);
}

.basictab li a:hover{
    background-color: #FFFFFF;
    color: rgba(255,255,255,1);
    background-image: url(../images/behindbar.png);
    background-repeat: repeat;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
}

.basictab li a:active{
    color: rgba(255,255,255,1);
    background-image: url(../images/behindbar.png);
    background-repeat: repeat;
}

.basictab li.selected a{ /*selected tab effect*/
    position: relative;
    padding-top: 10px;
    background-color: #dbffff;
    color: rgba(255,255,255,1);
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    background-image: url(../images/behindbar.png);
    background-repeat: repeat;
}


.submenustyle{
    border-top-width: 0;
    width: auto;
    display: none;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    background-image: url(../images/behindbar.png);
    background-repeat: repeat;
    color: rgba(255,255,255,1);
    font-size: 12px;
    background-position: left;
    letter-spacing: .2em;
    word-spacing: 4em;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    margin-left: 15px;
    margin-right: 15px;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{

    padding: 1px 5px;
    text-decoration: none;
    color: rgba(255,255,255,1);
}

.submenustyle a:hover{
    font-size: 12px;
    color: rgba(255,153,0,1);
}#navMenu {
}

HTML

<div class="grid_12">
    <ul id="maintab" class="basictab">
        <li class="active" rel="cyst"><a href="cyphm.htm">1</a></li>
        <li rel="cylim"><a href="cylim.htm">2</a></li>
        <li rel="cynic"><a href="cynic.htm">3</a></li>
        <li><a href="cypfo.htm">4</a></li>
        <li><a href="cyplca.htm">5</a></li>
        <li><a href="cyfam.htm">6</a></li>

    </ul>

    <div id="cyst" class="submenustyle">
        <a href="cyfd.htm">1</a>
        <a href="cycl.htm">2</a>
        <a href="cybr.htm">3</a>
        <a href="cylm.htm">4</a>
        <a href="cyth.htm">5</a>
        <a href="cycin.htm">6</a>
    </div>

    <div id="cynic" class="submenustyle">
        <a href="nicfd.htm">1</a>
        <a href="niccl.htm">2</a>
        <a href="nicbr.htm">3</a>
        <a href="niclm.htm">4</a>
        <a href="nicth.htm">5</a>
        <a href="niccin.htm">6</a>
    </div>

    <div id="cylim" class="submenustyle">
        <a href="limfd.htm">1</a>
        <a href="limcl.htm">2</a>
        <a href="limbr.htm">3</a>
        <a href="limlm.htm">4</a>
        <a href="limth.htm">5</a>
        <a href="limcin.htm">6</a>
    </div>


  <script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>
  </div>



</div>

Answer 1

这是“经典”方式，但效果很好。

<强> HTML：

<ul id="navigation">
    <li>
        parent
        <ul>
            <li>child</li>
            <li>child</li>
            <li>child</li>
        </ul>
    </li>
    <li>
        parent
        <ul>
            <li>child</li>
            <li>child</li>
            <li>child</li>
        </ul>
    </li>
<ul>

<强> CSS：

  ul#navigation > li > ul { display: none; }
  ul#navigation > li:hover > ul { display: block; }

Answer 2

我不确定你的意思究竟是什么，但如果你希望在悬停子菜单项时父项的背景保持高亮显示，那么你可以这样做：

ul li {
    background: #CCC;
}

ul li:hover {
    background: #0CF;
}

父母和孩子李都会使用它。 http://jsfiddle.net/zEkXu/

但你也可以用jQuery做到这一点：

$(".submenustyle").hover(function() {
    $(".basictab").css({"background-color":"#0CF"});
}, function() {
    $(".basictab").css({"background-color":"#CCC"});
});

这意味着：在悬停子菜单时执行某些操作（在这种情况下更改背景颜色）。

当选择子菜单功能时，水平菜单保持打开状态

2 个答案: