Criação de menu drop-down

[Ninja2112 0]

Olá...estou tentando adicionar submenus cortina ao meu menu principal e ainda não consegui. Aqui está o trecho do meu

código...alguem pode dar uma forcinha ?

No head tenho

body{
background:#eee;color:#000;font-size:11px;font-family:Verdana,sans-serif;margin:0;padding:0;text-align:center}
#tudo{background:#fff;border:#000 1px solid;width:750px;margin:auto;padding:0;text-align:left}
#cabecalho{background:#ccc;font-size:18px;text-align:center;padding:30px}
#menu{background:#000;height:27px;margin:0;padding:0}
#menu ul{margin:0;padding:0;margin-left:6px}
#menu ul li{display:inline}
#menu ul li a{background:#444;color:#fff;border:1px #fff solid;border-bottom:1px #000 solid;float:left;padding:5px 7px;margin:2px;text-decoration:none}
#menu ul li a:hover{background:#fff;color:red;border:red 1px solid;border-bottom:none;text-decoration:none}
#conteudo{clear:both;font-size:12px;padding:5px;text-align:center}
#rodape{clear:both;background:#000;color:#fff;padding:5px;text-align:center
}

e no body

<div id="menu">

	  <ul>
	    
      <li><a href="Link1.htm">MOVIMENTO DE DO</a></li>
	    
      <li><a href="Link2.htm">MOVIMENTO DE DN'S</a></li>
	   
      <li><a href="Link3.htm">NOTIFICACOES</a></li>
	    
      <li><a href="Link4.htm">M&EACUTE;DICOS</a></li>
	    
      <li><a href="Link5.htm">ESTABEL</a></li>
	  
	  </ul>

</div>

[Junior souza limeira 0]

Esse é o do meu site da uma olhada e tira por ele.

HTML:

<ul>

            <li><a href="index.html">Página Inicial</a></li>

            <li id="sobre"><a href="#">Sobre a Empresa
                <ul>
                    <li><a href="politica-de-privacidade.html">Política de Privacidade</a></li>
                    <li><a href="sobre-mundial-web-design.html">Sobre a Mundial Web Design</a></li>
                    <li><a href="desenvolvedores.html">Desenvolvedores</a></li>
                </ul>
            </a></li>

            <li id="services"><a href="#">Nossos Serviços
                <ul>
                    <li><a href="web-design.html">Web Design</a></li>
                    <li><a href="design-grafico.html">Design Gráfico</a></li>
                </ul>
            </a></li>

            <li id="clientes"><a href="#">Nossos Clientes
                <ul>
                    <li><a href="templates.html">Templates</a></li>
                </ul>
            </a></li>

            <li><a href="contato.html">Contato</a></li>

        </ul>

CSS:

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0px 0px 0px;
    font-size: 16px;
    text-align: right;
}

ul {
    text-align: left;
    display: inline;
    margin: 2px;
    margin-right: 11px;
    padding: 1px 1px 1px 1px;
    list-style: none;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 1px #d7d7d7;;
}

ul li a {
    text-transform: none;
    text-decoration: none;
    color: dodgerblue;
    font-size: 12px;
}

ul li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 10px 17px 10px 19px;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
ul li:hover {
    background: #d7d7d7;
    color: #fff;
}

ul li ul {
    padding: 0;
    position: absolute;
    top: 37px;
    left: -1px;
    width: 149px;
    margin-right: 100px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}

li#sobre {
    left: -2px;
    width: 119px;
}

li#services {
    left: -2px;
    width: 119px;
}

li#clientes {
    left: -2px;
    width: 119px;
}

ul li ul li {
    background: #d7d7d7;
    display: block;
    color: #fff;
    text-shadow: 0 0px 0 #1A2223;
}
ul li ul li:hover {
    background: #666;
    padding: 18px;
}

ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

[Ninja2112 0]

oi...grato, mas pode me dar um exemplo de como embutir um submenu de exemplo aproveitando o código que postei ?

[Junior souza limeira 0]

<ul>
	    
      <li><a href="Link1.htm">MOVIMENTO DE DO</a></li>
	   
           <ul>
               <li><a href="#"Submenu exemplo um</a></li>    
           </ul>

      <li><a href="Link2.htm">MOVIMENTO DE DN'S</a></li>

	   <ul>
               <li><a href="#"Submenu exemplo dois</a></li>    
           </ul>

      <li><a href="Link3.htm">NOTIFICACOES</a></li>
           
           <ul>
               <li><a href="#"Submenu exemplo tres</a></li>    
           </ul>
	    
      <li><a href="Link4.htm">M&EACUTE;DICOS</a></li>

           <ul>
               <li><a href="#"Submenu exemplo quatro</a></li>    
           </ul>
	    
      <li><a href="Link5.htm">ESTABEL</a></li>

           <ul>
               <li><a href="#"Submenu exemplo cinco</a></li>    
           </ul>
	  
</ul>

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 0 0;
    font-size: 16px;
    text-align: right;
}

ul {
    text-align: left;
    display: inline;
    margin: 2px;
    margin-right: 11px;
    padding: 1px 1px 1px 1px;
    list-style: none;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 1px #d7d7d7;;
}

ul li a {
    text-transform: none;
    text-decoration: none;
    color: dodgerblue;
    font-size: 12px;
}

ul li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 10px 17px 10px 19px;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
ul li:hover {
    background: #d7d7d7;
    color: #fff;
}

ul li ul {
    padding: 0;
    position: absolute;
    top: 37px;
    left: -1px;
    width: 149px;
    margin-right: 100px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}

ul li ul li {
    background: #d7d7d7;
    display: block;
    color: #fff;
    text-shadow: 0 0px 0 #1A2223;
}
ul li ul li:hover {
    background: #666;
    padding: 18px;
}

ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}