我需要添加子菜單到我的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菜單

回答

相關問題