Drop Down Menu in CSS

I want to make a drop down menu for my blog (wordpress) ..

But there is a problem.

I want when the user puts their mouse over the <ul></ul>, the sub-category to appear.

I want to solve the problem with CSS only.

Notice: I've changed the direction of the page because I am using an 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;}

Answers


Check out this article on how to make hoverable dropdowns using pure css/html


Need Your Help

Is there any classic 3 byte fingerprint function?

hash checksum fingerprint 24bit

I need a checksum/fingerprint function for short strings (say, 16 to 256 bytes) which fits in a 24 bits word. Is there any well known algorithm for that?

How can I crawl an HTML5 website and convert its HTML content to PDF (using a Python or Ruby library)?

javascript python ruby html5 frameworks

I'm looking for an engine/solution/framework/gem/egg/lib/whatever for either Ruby or Python to log into a website, crawl HTML5 content (mainly charts on a canvas), and be able to convert it into a ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.