I wish to create a drop lower menu from the blog (wordpress) ..

But there's some problem.

I would like once the user to have the ability to take their mouse around the <ul></ul> and also the sub-category seems.

I wish to solve the CSS problem only.

Notice: I alter the direction from the page becuse I'm utilizing a Arabic language.

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

Take a look at this article regarding how to make hoverable dropdowns using pure css/html