仅使用 css 菜单正确显示第三层子菜单

问题描述

我正在开发一个新网站，但 css 菜单有问题.通过示例更容易解释:这是该站点的链接:http://www.webau.net/CSFF/index.asp

I am developing a new site, and am having problems with the css menu. It is easier to explain by example: Here is the link of the site: http://www.webau.net/CSFF/index.asp

在Home"父菜单项下，我有以下配置:

Under the "Home" parent menu item, I have the following configuration:

Top level menu (parent)
    Submenu 1 (child 1)
        Submenu 2 (grandchild 1)
    Submenu 3 (child 2)
    Submenu 4 (child 3)

相反，它出现在这样的页面上，孙子 1 看起来取代了子 2 菜单:

Instead it appears on the page like this where the grandchild 1 looks like it takes the place of the child 2 menu:

Top level menu (parent)
    Submenu 1 (child 1)
    Submenu 2 (grandchild 1)
    Submenu 4 (child 3)

我可以看到子菜单 2 的列表略有偏移.这让我认为这是试图不恰当地显示孙子.

I can see a slight offset on the listing of Submenu 2.. which makes me think it is an attempt to display the grandchild inappropriately.

所以我假设我有两个问题..

So I am assuming I have two problems..

首先，当您将鼠标悬停在父菜单项上时，第三层菜单(孙子菜单 2)会同时显示第二层菜单(子子菜单 1、3、4).

First is that the third tier menu (grandchild submenu 2) is displaying at the same time the second tier menus (child submenus 1, 3, 4) display when you hover over the parent menu item.

其次，由于某种原因，孙子菜单 2 项正在取代子子菜单 3(位于其上).

And second is that for some reason the grandchild submenu 2 item is displacing (laying ontop of) the child submenu 3.

我认为当我更正孙子菜单的显示时，问题二会得到解决.

I think problem two will be fixed when I correct the display of the grandchild submenu.

谁能帮我弄清楚如何添加新的css代码来处理第三层或多层菜单..所以它们在他们自己的父级悬停之前是隐藏的，然后显示在它的父级子菜单的右侧列?

Can someone help me figure out how to add new css code to deal with the third tier or multi- tier menus .. so they are hidden until their own parent is hovered, and to then display to the right of it's parent's submenu column?

再次感谢您的帮助.SunnyOz

Thanks again for your help. SunnyOz

为了您的方便:HTML 代码:

For your convenience: HTML Code:

<div id="navcontainer">
    <div id="navsection">  
        <ul>
            <li id="navactive"><a class="current" href="#">Home</a>
                <ul>
                    <li><a href="#">submenu 1</a>
                        <ul>
                            <li><a href="#">submenu 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">submenu 3</a></li>
                    <li><a href="#">submenu 4</a></li>
                </ul>
            </li>
            <li><... rest of menu items not needed for example>
            </li>
        </ul>
    </div>
</div>

CSS 代码:

#navcontainer 
{
    width: 711px;
    height: 25px;
    text-align: center;
    margin: 0px auto; /*Center container on page*/
    clear: both;
    background-color: #129F9F;
    border: 3px solid #FFFFFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px; 

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16ACAC), color-stop(1, #0D6F6F));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #16ACAC 0%, #0D6F6F 100%); 
}
#navsection
{
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    position: relative;
}
#navsection ul
{
    padding: 0px 0px 0px 35px;  /* padding on left to get nav menu to center.. since it has a float left to make it display properly*/
    list-style: none;
}
#navsection ul li
{
    padding: 0;
    margin: 0;
    border-right: 2px solid #129F9F;
    float: left;
}
#navsection ul li.navcontact  /* to stop right border at end of nav line */
{
    padding: 0;
    margin: 0;
    border-right: none;
    float: left;
}
#navsection ul li a
{
    color: #FFF;
    display: block;
    text-decoration: none;
    padding: 0 15px;
}
#navsection > ul > li > a:hover, #navsection  > ul > li:hover > a  
{  
    text-decoration: none;
    color: #EAA339;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%); 
}

#navsection > ul > li > a.current:hover, #navactive a.current:link, #navactive a:visited, #navactive > ul  li  a:hover, #navsection a:hover
{
    text-decoration: none;
    color: #EAA339;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%); 
}

#navsection ul li ul
{
    display: none;
    width: auto;
    position: absolute;
    padding: 0px;
    margin: 0px;
}
#navsection ul li:hover ul
{
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
#navsection ul li:hover li
{
    float: none;
    list-style: none;
    margin: 0px;
}
#navsection ul li:hover li
{
    font-size: 12px;
    height: 24px;
    background: #54C4C4;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px; 
}
#navsection ul li:hover li a
{
    font-size: 11px;
    color: #fff;
    padding: 0px;
    display: block;
    width: 150px;
}
#navsection ul li li a:hover
{
    font-size: 11px;
    height: 24px;
    color:#EAA339;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px; 
}

推荐答案

这里有3个问题.

1. 您正在显示悬停在 <li/> 下方的所有 <ul/> 元素.将 #navsection ul li:hover ul 更改为 #navsection ul li:hover >ul 仅选择直接子节点

1. You are displaying all <ul/> elements that exist below a hovered <li/>. Change #navsection ul li:hover ul to #navsection ul li:hover > ul to select the immediate child only

您将每个掉落级别的位置设置为相同.尝试添加类似 #navsection ul ul ul { top: 1em;左:140px；}，这将阻止孙子遮挡孩子.

You are setting the position of each drop level to be the same. Try adding something like #navsection ul ul ul { top: 1em; left: 140px; }, this will stop the grandchild obscuring the child.

您的 title 属性会对您的导航产生负面影响.我会完全删除它们，因为它们不会向链接添加任何真正有用的信息并且会模糊菜单项，从而使导航难以使用.

You're title attributes are negatively affecting your navigation. I'd remove them entirely as they do not add any real beneficial information to the link and obscure the menu items making the navigation difficult to use.

希望对你有帮助:)

这篇关于仅使用 css 菜单正确显示第三层子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！