我需要添加子菜单到我的CSS菜单

我想我的子菜单向右滑动水平，我尝试了一些其他的CSS菜单，但它是在我的网页中创建问题。这是我的菜单我需要添加子菜单到我的CSS菜单

<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>

html页面，这是我的菜单CSS，我怎么能添加CSS创建一个drowp下子右键菜单

.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; 
}

来源

2013-04-01 Dilan Dilshan

我不知道你所说的滑动到右侧的意思。你能否详细说明一下。另见小提琴http://jsfiddle.net/gbutv/2/，这是你的意思？ – vdua

在我的CSS没有CSS写下来的子菜单，我的意思是，如果用户点击服装菜单或鼠标悬停，我想下降子菜单作为男装，女装，多数民众赞成我的意思是谢谢 –

好！那么我完全误解了你的问题。你需要有一点点的JavaScript的，以及 – vdua

看到这是如何工作的

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; 
}

小提琴

click here

来源

2013-04-01 06:33:01 Venugopal

我需要添加子菜单到我的CSS菜单

回答

相关问题