Question

我有一个菜单，其中包含一个子菜单，当主菜单中的链接悬停在主菜单下方时，该子菜单会显示在主菜单下方。我想要做的是在第一个子菜单中添加第二个子菜单，但将其设为下拉列表。我在css上的表现并不是很好，我想知道是否有人可以帮助我。我已经在线跟踪了一些教程，但我无法得到我想要的结果。这是我到目前为止的html和css。

<div id="navigation">
<ul id="mymenu">
    <li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(2)">Gallery</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(3)">What We Do</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(4)">Contact</a></li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
    <li><a href="#">General</a></li>
    <li><a href="#">Landon News</a></li>
    <li><a href="#">Trust Us</a></li>
</ul>
<ul id="s2">
    <li>
        <a href="#">Security Systems</a>
        <ul id="s2sys">
            <li><a href="#">Arlington HA</a></li>
            <li><a href="#">Enfield HA</a></li>
            <li><a href="#">Revere HA</a></li>
        </ul>
    </li>
    <li>
        <a href="#">WLAN Systems</a>
        <ul id="s2wlan">
            <li><a href="#">Beverly HA</a></li>
            <li><a href="#">Holyoke HA</a></li>
            <li><a href="#">Meriden HA</a></li>
            <li><a href="#">Revere HA</a></li>
        </ul>
    </li>
</ul>
<ul id="s3">
    <li><a href="#">Computers</a></li>
    <li><a href="#">Strategic Planning</a></li>
    <li><a href="#">Security Systems</a></li>
    <li><a href="#">WLAN, WiFi Broadband</a></li>
</ul>
<ul id="s4">
    <li><a href="#">Email</a></li>
    <li><a href="#">Address Info</a></li>
</ul>
</div>

这是主菜单的javascript，它将显示第一个子菜单

function showsubmenu(id){
    submenu = document.getElementById('s'+id);
    for(i=1;i<=4;i++){
        if(i==id){
            submenu.style.display="block";
        } else {
            document.getElementById('s'+i).style.display="none";
        }
    }
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
        this.className+=" hover";
    }
    sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" hover\\b"), "");
    }
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

这是CSS

#navigation{
    height:32px;
    margin:0 auto;
    width:auto;
}
#navigation ul{
    height:32px;
    line-height:32px;
}
#navigation ul li{
    display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
    padding:0 20px;
    display:block;
    text-decoration:none;
    float:left;
    color:#1361A5;
    font-weight:bold;
    text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
    color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
    width:auto;
    margin:0 auto;
    background:#C3C2C1;
    height:30px;
    font-size:11px;
    border-radius:8px;
    -moz-border-radius:8px; /* Firefox 3.6 and earlier */
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    -moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    box-shadow: 0 2px 3px rgba(136, 136, 136, 1); 
    behavior: url(http://localhost/landon/assets/pie/PIE.php);
    position: relative;
}
#sublinks ul{
    height:32px;
    line-height:31px;
}
#sublinks ul li{
    display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
    padding:0 10px;
    display:block;
    text-decoration:none;
    float:left;
    color:#FFFFFF;
}
#sublinks ul li a:hover{
    text-decoration:underline;
}
#sublinks li:hover ul{
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
#sublinks li:hover li {
    float: none; 
}
#sublinks li:hover li a {
    background-color: #C3C2C1;
    border-bottom: 1px solid #fff;
    color: #000; 
    left:50;
}
#sublinks li li a:hover {
    background-color: #8db3ff; 
}

/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}

我要做的是让第二个子菜单从第一个子菜单下拉，此时它显示在同一行内而不是下拉列表中。我怎么能这样做？

Answer 1

尝试将此css添加到子菜单中的下拉列表ul列表中。

position: absolute;
top: 30px;

根据您要查找的结果类型，您可能需要修改top值，或者通过添加width

来保持垂直下拉列表

Demo: http://jsfiddle.net/4k2Tx/2/

Answer 2

http://jsfiddle.net/kVztG/1/

要使子子菜单下拉，请更改下面的css。

#sublinks li:hover li {
    display:block;
    position:relative;
    top:30px;
}

位置：relative和top：30px停止显示子菜单上显示的下拉菜单，并且display：block阻止li显示内联。

创建下拉菜单

2 个答案: