How to add a drop down to this menu? - css

Question

I have a really simple menu that I'd like to add a drop-down. What do I need to do to add a drop down in here to one of the items?
http://www.cozinhatur.com/teste1/
HTML
<div class="menu">
<div class="search">
<form id="form1" name="form1" method="post" action="">
<label><span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Pesquisar..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</label>
</form>
</div>
<ul>
<li>HOME</li>
<li>QUEM SOMOS</li>
<li>COZINHAS</li>
<li>DIVERSOS</li>
<li>PRODUTOS</li>
<li>CONTACTOS</li>
</ul>
<div class="clr"></div>
</div>
CSS
.menu
{
background:#5d5d5d;
margin:0 auto;
padding:0;
width:942px;
}
.menu ul
{
border:0;
float:left;
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.menu ul li
{
border:0;
float:left;
margin:0;
padding:0 5px 0 0;
}
.menu ul li a
{
color:#fff;
float:left;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
margin:0;
padding:15px;
text-decoration:none;
}
.menu ul li a:hover
{
background:#b57800;
}
.menu ul li a.active
{
background:#1caedd;
}
.menu ul li ul,.menu ul li ul a
{
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
}

Answer 1

Have made a simple CSS drop down from your menu. See jsFiddle Demo. Hover over the second and third menu items to see the drop down.
Hoping this will help you to further build to suit your needs.
The code changes....
HTML
<div class="menu">
<ul>
<li>HOME</li>
<li>QUEM SOMOS
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>COZINHAS
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li>DIVERSOS</li>
<li>PRODUTOS</li>
<li>CONTACTOS</li>
</ul>
</div>
CSS
.menu {
background:#5d5d5d;
margin:0 auto;
padding:0;
width:942px;
}
ul {
border:0;
float:left;
list-style:none;
margin:0;
padding:0;
text-align:left;
}
ul li {
display: block;
position: relative;
float: left;
border:0;
float:left;
margin:0;
padding:0 5px 0 0;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #5d5d5d;
margin: 0px;
white-space: nowrap;
}
ul li a.active
{
background:#1caedd;
}
ul li a:hover {
background: #b57800;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #5d5d5d;
}
li:hover li a:hover {
background: #b57800;
}

Answer 2

There is a good example here. The main point is when hovered show the sub menu.
http://www.red-team-design.com/css3-dropdown-menu

Answer 3

see this is pure css based dropdown menu:-
HTML
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
see the demo:- http://jsfiddle.net/XPE3w/140/