html - 具有许多子菜单的 CSS 未排序列表

Question

我写了一个 CSS 未排序的菜单，它确实显示了正确的名字和子菜单。

每当我将鼠标悬停在 [Helpdesk System] > [New Task] 时，显示都没有问题。

每当我将鼠标悬停在 [Helpdesk System] > [Task Overview] 上时，就会出现问题。它显示 [硬件 list ] > [新硬件]。

我猜是 [New Task>Task Overview] 和 [Hardware Inventory>New Hardware] 被隐藏和重叠了。

我该如何纠正这个问题？

HTML代码:

 <div id="topbanner">

<ul class="rightmenu">
    <li><a href="<? echo ROOT_NAME ?>/home.php">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Menu</a>
        <ul>
        <li><a href="#">Helpdesk System</a>
            <ul>
                <li><a href="#">New Task</a></li>
                <li><a href="#">Tasks Overview</a></li>
                <li><a href="#">Search Tasks</a></li>
            </ul>
        </li>
        <li><a href="#">Hardware Inventory</a>
            <ul>
                <li><a href="#">New Hardware</a></li>
                <li><a href="#">Search Hardware</a></li>
                <li><a href="#">No FME Assets</a></li>
                <li><a href="#">Misplace Assets</a></li>                        
            <li><a href="#">Hardware Tracking</a></li>
            </ul>
        </li>
        <li><a href="<? echo ROOT_NAME; ?>/webspace/">Web Space</a></li>
        <li><a href="#">Application System</a></li>
        <li><a href="#">Vendor Contacts</a></li>
        <li><a href="#">Administration</a>
            <ul>
                <li><a href="#">Staff Administration</a></li>
                <li><a href="#">Department Overview</a></li>
                <li><a href="#">Page Management</a></li>
                <li><a href="#">Actions Tracking</a></li>
                <li><a href="#">Login History</a></li>      
            </ul>
        </li>
        <li><a href="#">Logoff</a></li>
        </ul>
    </li>
</ul>
</div>

CSS 代码:

#topbanner    { 
width:100%; height:25px; margin:0;position:relative;background-color:#4c4e5a;display: block;}

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { margin: 0; padding: 0; border: none; outline: none; }

.rightmenu { float: right; }    
.rightmenu li a{
display: block; padding: 0 14px; margin: 3px 0;color: #f3f3f3;background-color: #4c4e5a;}

.rightmenu ul {
    position: absolute;
opacity: 0;
background-color: #4c4e5a;
left: auto;
right:0;
width:180px;
}

.rightmenu ul ul {
position: absolute;
opacity: 0;
right: 100%;
top: 0%;
background-color: #4c4e5a;
width:180px;
}

.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu li:hover > ul { opacity: 1; } 

.rightmenu ul li{
height:0;
overflow:hidden;
padding: 0; 
}

.rightmenu li:hover > ul li {  
height: 25px;
overflow: visible; 
padding:0;
} 

.rightmenu ul li a { 
white-space: nowrap;
border: none;
} 

我省略了一些样式以使代码更适合您。 (如阴影、边框样式和圆 Angular )

Answer 1

您的一个问题是您在应该使用“display:none”时使用了“opacity:0”。 opacity 属性仅设置元素的 alpha 级别，但 display 设置元素如何与页面上的其他元素交互。

然而，您的主要问题是您将 CSS 泛化得太多了。通常情况下，泛化代码是一个很好的养成习惯，但在这种情况下，您需要更加具体地了解用户指向的导航级别。

这是您应该关注的代码:

.rightmenu ul {
    position: absolute;
    display: none;
    background-color: #4c4e5a;
    left: auto;
    right:0;
    width:180px;
    top: 25px;
}

.rightmenu ul ul {
    position: absolute;
    display: none;
    right: 0%;
    top: 0%;
    background-color: #4c4e5a;
    width:180px;
}
.rightmenu ul ul:hover, .rightmenu li li:hover > ul { 
    right: 100%; 
    display: block;
}

.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu li:hover > ul, .rightmenu li > ul:hover { display: block; } 

DEMO