在CSS中下拉菜单

Question

我想为我的博客制作一个下拉菜单（wordpress）..

但是有一个问题。

我希望当用户将鼠标悬停在要显示的子类别<ul></ul>上时。

我想用CSS解决问题。

注意：我改变了页面的方向，因为我使用的是阿拉伯语。

的index.html

<div id="menu-body"><ul><a href="#">Home</a></ul>
<ul><a href="#">Category 1</a></ul>
<ul><a href="#">Category 2</a></ul>

<ul><a href="#">Category 3</a>
<li>Sub-Cat 1</li>
<li>Sub-Cat 2</li>
<li>Sub-Cat 3</li></ul>

<ul><a href="#">Category 4</a></ul></div>

的style.css

#menu-body {
 border:dotted 1px #FFFFFF;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 border-radius: 7px;
 background: #2C2C2C;
 height:35px;
 width:inherit;
 color:#fff;
 padding-right:15px;
 padding-top:0px;
 padding-bottom:0px;
 font-family:Tahoma , Arial;
 font-size:13px;

}
#menu-body ul  {
 float:right;
 list-style:none;
 margin:0px 0px 0px 0px;
 padding:10px;
 cursor:pointer; position:relative;

}

#menu-body ul:hover {
background-color:#FFFFFF;
color:#2C2C2C;
}
#menu-body ul a {
 text-decoration:none;
 color:#fff; 
 outline:0;

}

.dropdown_1column { margin:4px auto;
 position:absolute;
 left:-999em; /* Hides the drop down */
 text-align:right;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;display:block;
 border-radius: 0px 5px 5px 5px;}
 .dropdown_1column {width: 140px;}

#menu-body ul:hover a {
color:#000;}

Answer 1

查看this article如何使用纯css / html制作可下拉的下拉列表