Как добавить выпадающее меню?

Question

У меня есть очень простое меню, которое я бы хотел добавить в раскрывающийся список. Что мне нужно сделать, чтобы добавить сюда один из элементов?

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

Сделали просто капля CSS вниз из меню. См. jsFiddle Demo. Наведите указатель мыши на второй и третий пункты меню, чтобы увидеть раскрывающийся список.

Надеясь, что это поможет вам в дальнейшем построить в соответствии с вашими потребностями.

Код меняется ....

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

Answer 2

Существует хороший пример здесь. Главное, когда вы навешивали отображение подменю.

http://www.red-team-design.com/css3-dropdown-menu

Answer 3

видеть это чистый основе CSS выпадающее меню: -

HTML

<ul id="menu"> 
    <li><a href="">Home</a></li> 
    <li><a href="">About Us</a> 
    <ul> 
    <li><a href="">The Team</a></li> 
    <li><a href="">History</a></li> 
    <li><a href="">Vision</a></li> 
    </ul> 
    </li> 
    <li><a href="">Products</a> 
    <ul> 
    <li><a href="">Cozy Couch</a></li> 
    <li><a href="">Great Table</a></li> 
    <li><a href="">Small Chair</a></li> 
    <li><a href="">Shiny Shelf</a></li> 
    <li><a href="">Invisible Nothing</a></li> 
    </ul> 
    </li> 
    <li><a href="">Contact</a> 
    <ul> 
    <li><a href="">Online</a></li> 
    <li><a href="">Right Here</a></li> 
    <li><a href="">Somewhere Else</a></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; 
} 

посмотреть демо: - http://jsfiddle.net/XPE3w/140/