CSS Menu Dropdown - Dreamweaver

Este horizontal pode ser feito e desenhado em menos de 15 minutos, se você seguir as instruções abaixo com exemplos de código completo!

---

1. Adicione o código HTML para o CSS Menu Dropdown

Não há marca de HTML mínima necessária para se criar um menu horizontal suspensa ou menu suspenso lista. Se você nunca usou a técnica de navegação menu da lista antes, então ele pode parecer um pouco confuso no início. A navegação suspensa utiliza uma técnica que leva uma lista não ordenada com outra lista não ordenada aninhada dentro dela. Aqui está o código html para a queda no menu horizontal que você deve copiar em sua página:

  

 


  Produtos         

  Suit Wet        
  Knee Socks  
  Pirata Hat  
  Kilt  
  
   
class="clearFloat"
    

Observe que uma lista não-ordenada exterior foi criado e dentro desta lista não ordenada é um item da lista que irá conter o alto nível de link de navegação horizontal. Neste caso, o nome da ligação é 'dos ​​produtos e que está dentro de uma ligação nulo.
Antes da lista de nível superior tag link item foi fechado (), uma outra lista não ordenada tinha sido criado em um dos lados. Dentro da lista interna ordenada são tags lista de itens que compõem os links para o menu drop-down lista.
O nível superior tag item da lista encontra-se encerrada, mantendo a lista ordenada dentro dele. É muito importante que você use html comentários ao longo do caminho, enquanto a codificação manual para que você saiba onde cada desordenadas lista termina eo outro começa. Há uma clara propriedade float html incluído e anexado após o menu lista que conterá os elementos flutuantes e permitir o fluxo normal do documento para continuar. Menu dropdown é então envolto em uma div container que é chamado 'NavMenu.

2. Adicione o Dropdown Horizontal CSS Menu

Aqui estão os estilos CSS que fazem o trabalho de menu horizontal css:

   # {NavMenu      margin: 0;      width: auto;   }     # NavMenu ul {      margin: 0;      padding: 0;      line-height: 30px;   }     # NavMenu li {      margin: 0;      padding: 0;      list-style: none;      float: left;      position: relative;      background: # 999;   }     # NavMenu ul li a {      text-align: center;       height: 30px;      width: 150px;      display: block;      color: # 000;      font-family: "Comic Sans MS", cursive;      text-decoration: none;      color: # FFF;      border: solid 1px # FFF;      text-shadow: 1px 1px 1px # 000;    }    / ********************************************* /   / * Esconder o menu e deixe-o retornar * /   / ********************************************* /    # NavMenu ul ul {   position: absolute;   visibility: hidden;   top: 32px;   }     # NavMenu ul li: hover ul {      visibility: visible;      z-index: 9999;    }     / ********************************************** /     / * Define nível superior cor de foco * /     # NavMenu li: hover {     background: # 09F;   }     / * Itens conjuntos de link pairar cor e fundo * /     # NavMenu ul li: hover ul li a: hover {      color: # 000;      background: # CCC;   }     / * Cor do texto Alterações em foco para o menu principal foco * /     # NavMenu a: hover {       color: # 000;   }       / * Contém o Float * /    . ClearFloat {      clear: both;       margin: 0;      padding: 0;   }    / * IE7 Fix Display * /    # NavMenu ul li {      display: inline;      } 

O drop-down estilos css primeiro remover todas as margens padrão das marcas de lista e tags div sendo usados. A etiqueta de lista é então ajustado para uma posição de relativa e é utilizado como um tampão para a lista ordenada que é definida como uma posição de absoluto.
O menu drop down css para os links aninhados está definido para uma posição de oculto. O menu drop down css é então definida como voltar a aparecer quando um visitante paira sobre o link principal.
O menu drop down css para os links aninhados está definido para uma posição de oculto. O menu drop down css é então definida como voltar a aparecer quando um visitante paira sobre o link principal e é feito usando um hover pseudo seletor.
O menu css horizontal é então denominado de acordo com as cores do seu site. Os estilos css do menu dropdown são então adicionados com algumas complicadas, mas interessante css efeitos do menu de rolagem. Você deve experimentar com o esquema de cores do seu menu dropdown css e por isso você deve ser capaz de trabalhar para fora como os efeitos de menu css capotamento estão sendo utilizados com cada presente selector nos estilos de ter colado no seu arquivo css.
Se você copiou e colou todos os estilos do HTML para o menu dropdown horizontal e suspensa a navegação, bem como sobre os estilos copiados para o menu dropdown css, então você terá a exata do menu dropdown css mesmo que eu criei neste web página.
Para adicionar mais colunas e itens de menu para o menu drop-down, basta copiar e colar o código html de novo e mudar o menu e os itens da lista para os links que você deseja para você site.


Site de Origem: http://www.dreamweavertutorial.co.uk