Я хочу сделать выпадающее меню для моего блога (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;}