0

メインメニュー内のリンクにカーソルを合わせると、メインメニューの下に表示されるサブメニューを含むメニューがあります。私がやりたいことは、最初のサブメニュー内に 2 番目のサブメニューを追加することですが、それをドロップダウンにします。私は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;}

私がやろうとしているのは、2番目のサブメニューを最初のサブメニューのドロップダウンにし、現時点ではドロップダウンではなく同じ行に表示することです。これどうやってするの？

4

2 に答える 2

1

この CSS をulサブメニュー内のドロップダウン リストに追加してみてください。

position: absolute;
top: 30px;

探している結果のタイプに応じて、top値を修正したり、ドロップダウンを縦に追加したりできます。width

デモ: http://jsfiddle.net/4k2Tx/2/

于 2012-09-14T15:10:27.947 に答える
1

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

サブサブメニューをドロップダウンにするには、以下の css を変更します。

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

position:relative と top:30px はドロップダウンがサブメニューの上に表示されないようにし、display:block は li がインラインで表示されないようにします。

于 2012-09-14T15:13:59.863 に答える