在HTML中使用CSS添加子菜單

Question

我正在嘗試使用CSS添加子菜單。 當我將鼠標懸停在鏈接“頂部菜單”上時，我希望出現一個子菜單。 在這里查看代碼

    <div id="navbar"> <span class="navbutton">
                <a id="button-1" href="#">Shop</a>
            </span>
 <span class="navbutton">
                   <a href="#">
                       Test1</a>   
                </span>
 <span class="navbutton"><a id="button-3" href="#">Top Menu</a>
    </span>
 <span class="navbutton"><a id="button-4" href="#">Test1</a>
    </span>
 <a class="linefreak"></a><a class="linefreak"></a>
 <span class="navbutton"><a id="button-5" href="#">Test2</a>  
    </span>
</div>

任何幫助深表感謝。 謝謝

Answer 1

演示小提琴

以下內容可以幫助您入門-注意，對於這種類型的設置，最好使用列表（ ul ， li ）。

HTML

<ul>
    <li>Shop</li>
    <li>Test1</li>
    <li>Top Menu
        <ul>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
        </ul>
    </li>
    <li>Test1</li>
    <li>Test2</li>
</ul>

CSS

ul {
    list-style:none;
    background:green;
}
ul, li {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    padding:10px 10px;
}
ul li ul {
    display:none;
    position:absolute;
}
ul li ul li {
    display:block;
}
ul li:hover ul {
    display:block;
}

Answer 2

SW4是正確的..對於您的示例，這里的小提琴是：

http://jsfiddle.net/fm7Ct/4/

.navbutton:hover #button-3+.submenu{
    display:inline;
}
.submenu{
    display:none;
}