我需要添加子菜单到我的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 & 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 & 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;
}
答
看到这是如何工作的
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;
}
小提琴
我不知道你所说的滑动到右侧的意思。你能否详细说明一下。另见小提琴http://jsfiddle.net/gbutv/2/,这是你的意思? – vdua
在我的CSS没有CSS写下来的子菜单,我的意思是,如果用户点击服装菜单或鼠标悬停,我想下降子菜单作为男装,女装,多数民众赞成我的意思是谢谢 –
好!那么我完全误解了你的问题。你需要有一点点的JavaScript的,以及 – vdua