Question

我把一个非常基本的悬停示例放在一起。

这是CSS：

.button
{
    width: 50px;
    height: 15px;
    background-color: #090;
    padding: 5px;
}

.menu
{
    height: 200px;
    width: 50px;
    background-color: #900;
    display: none;    
}

我很好奇定位菜单的最佳方法是什么。如何使第一个菜单在第一个按钮下方下降，第二个菜单在第二个按钮下方下降？我不太擅长CSS定位等。

Answer 1

使用样式化的无序列表，而不是DIV。使用display:block将大部分样式粘贴在A标签上。

<div class="menu">
<ul>
    <li><a href="...">Menu Item</a>
        <ul>
            <li><a href="...">Sub Item</a></li>
            <li><a href="...">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="...">Menu Item</a></li>
</ul>
</div>

CSS：

.menu ul, .menu li {
    padding:0;
    margin:0;
    list-style-type:none
}

.menu li {
    display:inline-block;
    position:relative;
}

.menu a {
    font-family:arial;
    text-decoration:none;
    display:block;
    background-color:#c0c0c0;
    padding:3px;
    color:#000000
}

/* level two */

ul ul {
    position:absolute;
    display:none;    
}

ul ul a {
     background-color:#d0d0d0;
     margin-top:3px;   
}

Answer 2

最好的方法是使用<ul>代替您当前的设置 http://jsfiddle.net/elclanrs/fHmvs/1/

<ul class="menu">
    <li>
        <a href="#">One</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Two</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
</ul>

的CSS：

.menu li {
    float: left;
    position: relative;
}
.menu ul {
    position: absolute;
    display: none;
    background: red;
}
.menu ul li { clear: both; }
.menu a {
    display: block;
    padding: .5em;
    margin: .1em;
}

JQ：

$('.menu li').hover(function() {
    $(this).children('ul').stop(1, 1).slideToggle();
});

定位CSS悬停菜单的正确方法是什么？

2 个答案: