1

我希望我的子菜单水平向右滑动，我尝试了其他一些 CSS 菜单，但它在我的网页中产生了问题。这是我的菜单的 html 页面

<li class="widget">
    <h2>Categories</h2>
    <ul>
        <li><a href="index.php" title="Category 1">All </a></li>
        <li><a href="search.php?category=Groceries" title="Category 1">Groceries</a></li>
        <li><a href="search.php?category=Personal_care" title="Category 2">Personal Care</a></li>
        <li><a href="search.php?category=Dining" title="Category 5">Dining</a></li>
        <li><a href="search.php?category=entertainment" title="Category 7">Entertainment</a></li>
        <li><a href="search.php?category=travel" title="Category 6">Travel </a></li>
        <li><a href="search.php?category=Books_Magazine" title="Category 3">Books &amp; Magazine</a></li> 
        <li><a href="search.php?category=clothing" title="Category 4">Clothing</a></li>
        <li><a href="search.php?category=Sport_Fitness" title="Category 9">Sport &amp; Fitness</a></li>
        <li><a href="search.php?category=other" title="Category 11">Other</a></li>
        <li></li>
    </ul>
</li>

这是我的菜单css，如何添加css以在右侧创建下拉子菜单

.widget { padding-bottom: 16px; }
.widget h2 {
    height: 37px;
    line-height: 37px;
    background: url('images/widget-title.png') no-repeat 0 0;
    font-family: 'Museo500', arial, sans-serif;
    font-size: 18px;
    color: #fff;
    font-weight: normal;
    padding: 0 9px 5px 22px;
}
.widget li a {
    background: #6692C6;
    line-height: 26px;
    height: 26px;
    padding-left: 23px;
    font-size: 13px;
    border-bottom: 1px solid #fff;
    color: #EEEEEE;
    display: block;
}
.widget li.last a { border: none; }
.widget li a:hover {
    color: #333333;
    background: #fff;
    text-decoration: none;
    font-weight: bold;
}
4

1 回答 1

0

看看这是如何工作的

HTML

<li class="widget">
<h2>Categories</h2>
<div class='subMenu'>
<ul>
    <li><a href="index.php" title="Category 1">All </a></li>
    <li><a href="search.php?category=Groceries" title="Category 1">Groceries</a></li>
    <li><a href="search.php?category=Personal_care" title="Category 2">Personal Care</a</li>
</ul>
</div>
</li>

CSS

.subMenu{
display:none;
}
.widget:hover .subMenu{
 display:block;
}

小提琴

点击这里

于 2013-04-01T06:33:01.590 回答