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><a href="index.html" class="active">HOME</a></li>
    <li><a href="quemsomos.html">QUEM SOMOS</a></li>
    <li><a href="index.html">COZINHAS</a></li>
    <li><a href="#">DIVERSOS</a></li>
    <li><a href="index.html">PRODUTOS</a></li>
    <li><a href="contact.html">CONTACTOS</a></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><a href="index.html" class="active">HOME</a></li>
        <li><a href="quemsomos.html">QUEM SOMOS</a>
          <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li> 
            <li><a href="">Item 3</a></li> 
          </ul> 
        </li>
        <li><a href="index.html">COZINHAS</a>
         <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li> 
            <li><a href="">Item 3</a></li> 
          </ul> 
        </li>
        </li>
        <li><a href="#">DIVERSOS</a></li>
        <li><a href="index.html">PRODUTOS</a></li>
        <li><a href="contact.html">CONTACTOS</a></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; 
}