Como criar um menu suspenso horizontal em HTML

Em HTML, os menus suspensos são uma função dos formulários. Eles dão à pessoa que preenche o formulário várias opções pré-definidas, sem ocupar muito espaço. O HTML de um menu suspenso é simples e precisa ser incluído entre a tag de abertura e de fechamento para funcionar no seu formulário de envio de e-mail. Você pode estilizar ainda mais seu menu suspenso com CSS para torná-lo mais uniforme e adequado ao design de sua página.

1

Escreva a tag de abertura para o menu suspenso, que é. Ter um nome para o seu menu ajuda seu manipulador de formulários a identificar e rotular a saída de acordo. Isso irá variar, no entanto, dependendo de como você configurou seu site para lidar com formulários.

2

Adicione as opções desejadas ao seu menu suspenso com a tag de opção. Pode parecer algo assim:

Alice Bob

Você pode ter quantos desejar, embora a criação de muitas opções possa ser impraticável para um menu suspenso - especialmente se você corre o risco de exceder a altura da janela. Se você tiver mais de uma dúzia de opções suspensas, considere o uso de botões e colunas de rádio para as suas opções.

3

Feche sua tag quando terminar as tags, como

Alice Bob Charlie Dane Edward Frances

4

Se você quiser começar com uma opção específica selecionada, você pode adicionar 'selected = "selected"' a uma opção, como

Alice Bob Charlie Dane Edward Frances

Se você não usar essa tag, a lista suspensa usará sua primeira opção como a opção padrão selecionada.

5

Altere o estilo padrão do menu suspenso especificando a tag de seleção na sua folha de estilo, como:

selecione {font-size: 14px; fundo: # 8CCCC8; cor: #FFFFFF; borda: 1px sólido # 000000; largura: 75px; }

Você também pode fazer isso com "opção" se quiser alterar a aparência das opções. Por exemplo, você pode querer que a opção selecionada tenha texto branco, com as outras opções em texto preto quando o usuário clicar na seta para visualizá-las.

Dicas

• Se você quiser aplicar uma classe ou um ID para selecionar, para que o estilo CSS afete apenas um único menu suspenso, altere a tag para.
• Você pode incluir uma opção nula como sua primeira opção adicionando "".