Question

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

每当我悬停[帮助台系统]＆gt; [新任务]显示没问题。

每当我悬停[帮助台系统]＆gt; [任务概述]出现了问题。它显示[硬件清单]＆gt; [新硬件]。

我猜是[新任务＆gt;任务概述]和[硬件清单＆gt;新硬件]被隐藏和重叠。

我该如何纠正？

Capture 1

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

我省略了一些样式，以便让代码缩短。（如阴影，边框样式和圆角）

Answer 1

你的一个问题是你正在使用＆＃34;不透明度：0＆＃34;当你应该使用＆＃34; display：none。＆＃34; 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

带有许多子菜单的CSS未排序列表

1 个答案: