fotosFale conoscoLargura, portabilidade e especificidade do menuPara assegurar ao projetista, total controle sobre o posicionamento da lista que contem o menu bem como garantirmos que as regras CSS para os elementos HTML que compoem o menu (lista ul eli e link a ) nao afetem as listas e links porventura existentes em outros locais do documento, vamos enclausurar o nosso menu em uma dive declarar as regras CSS para esta div. Chamemos esta div de: #menuE a primeira regra CSS para nosso menu:#menu {position: absolute;left: ## px; /*posicao a direita*/top: ## px; /*posicao abaixo*/width: 180px;}Nota: Esta regra CSS da ao menu a portabilidade, isto significa que definindo os valores left e top, voce coloca o menu exatamente onde quiser no documento e com a precisao de pixel! Aqui voce define tambem uma largura para a div. No caso, adotei igual a largura do menu que esta contido na div. Posicionamento do menu Observe no esquema mostrado abaixo a chave para posicionar o menu no documento:As coordenadas para position:absolute tem origem no canto superior esquerdo.TOP: distancia para baixo;LEFT: distancia para a direita.Caso voce queira inserir o menu dentro uma celula de tabela ou posiciona-lo relative ou float, basta voce alterar as propriedades na regra acima.Os marcadores de listasComo voce observou no item O codigo HTML tipico para um menu, o browser renderizou nossa lista com um "marcador de lista" (uma bolinha preta na frente de cada item da lista) e um recuo para o texto.Precisamos criar uma regra CSS para eliminar o marcador de lista e o recuo do texto.A propriedade CSS que controla o marcador das listas e: list-style-typeNao lembra? Se voce nao esta seguro com as propriedades CSS das listas refresque sua memoria lendo este tutorial.Para remover o recuo do texto ha um detalhe. Alguns browsers usam a propriedade margin e outros a propriedade padding para o recuo das listas!(Ainda vai chegar o dia em que os fabricantes seguirao as web standards e todos usaremos e projetaremos seguindo uma so e universal norma e seremos mais felizes. E, os malditos bugs morrerao todos!)Conclusao para nosso menu:as regras CSS para ul sao list-style-type:none; margin:0px; padding:0px;#menu ul {list-style-type: none; /*remove o marcador*/margin: 0; /*remove o recuo IE e Opera*/padding: 0; /*remove o recuo Mozilla e NN*/font: bold 16px arial, helvetica, sans-serif;}Nota : Nesta regra CSS tambem definimos as caracteristicas das letras que escolhemos para o menu. Com mais esta regra CSS nossa lista sera renderizada no browser conforme mostrado abaixo: Home PagePortfolioEquipe tecnicaParceirosAlbum de fotosFale conosco Estilizando o elemento <li> O elemento li define cada uma das linhas que contem os links. A regra CSS adicionada a este elemento controla a distancia entre os links pela definicao da propriedade margin. Separamos os links na vertical definindo um margem inferior, conforme mostrado abaixo: #menu li { margin-bottom:1px; } Estilizando o elemento <a> Dentro de li estao inseridos os elementos inline a;: E aqui mais uma dica: Para fazer com que toda a area da caixa do link seja "clicavel" devemos declarar display:block; Se omitirmos esta declaracao, somente sera "clicavel" as letras que definem o