A criação de menus é provavelmente um dos pontos principais no desenvolvimento de sites e programas. Além disso, uma boa elaboração e design lógico de tal menu é a cara de um site ou de qualquer programa. Por exemplo, vamos pegar a Microsoft e o sistema operacional Windows 7. Após o lançamento do Windows 7, a Microsoft ouviu muitas críticas que não eram lisonjeiras para si mesma. Houve muitas críticas, mas na maioria das vezes itens de menu posicionados de maneira inconveniente. Leia com atenção este tutorial sobre como criar um menu suspenso horizontal com CSS e Expression Web. Os estilos de tag mudarão para criar o menu
Instruções
Passo 1
Vá para Gerenciar Estilos e clique no botão Novo Estilo. Dê o nome Seletor ul li ao novo estilo que você acabou de criar. Lembre-se também de se certificar de que o novo estilo deve ser definido no arquivo drop-down.css.
Passo 2
Para esticar um menu horizontal, você precisa dizer aos itens de menu que ele será horizontal. Em seguida, você precisa determinar a largura de cada item do menu e remover todos os pontos desnecessários na frente de todos os itens da lista.
etapa 3
Para alinhamento horizontal, vá para Layout e defina o atributo de exibição para embutido. Defina o atributo float para a esquerda. Clique no botão Aplicar. Todos os itens da lista devem ser definidos em uma linha. Para que eles não se sobreponham, você precisa fazer o seguinte: definir o valor da posição do atributo largura para 150px. Agora dê uma olhada. Todos os elementos da lista devem ter o mesmo tamanho.
Passo 4
Agora precisamos tentar remover os pontos na frente dos itens da lista. Para fazer isso, vá para List e defina o atributo list-style –type como none.
Etapa 5
Clique em OK para aceitar todas as alterações.
Etapa 6
Para ajustar o tamanho da fonte para o estilo ul li, você precisa fazer o seguinte. Em Gerenciar Estilos, clique com o botão direito no estilo ul li que você precisa para selecionar Modificar Estilo. A caixa de diálogo familiar para adicionar ou alterar atributos será aberta. Vá para a categoria Font e defina o atributo font-family como Arial, Helvetica, sans-serif. Em seguida, vá para o atributo font-size e defina-o como 0.9em. Depois disso, configure o atributo text-transform, defina o valor para maiúsculas.
Etapa 7
A altura dos itens no menu criado pode ser ajustada na categoria Posição. Defina o atributo de altura para 30 px.
Etapa 8
Em seguida, você precisa salvar o arquivo menu.html. Para fazer isso, o Expression Web abrirá a janela necessária Salvar arquivos incorporados para salvar o arquivo. Salve no arquivo drop-down.css. Clique em OK para salvar.
Etapa 9
Agora verifique o seu resultado. Para confiabilidade, é melhor testá-lo em navegadores diferentes. Para verificar o resultado obtido no navegador padrão, você deve pressionar a tecla F12 em seu teclado.
