1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Menu com Sub menu CSS

Discussão em 'Web Development' iniciada por airtonsfilho, 29 de Maio de 2012. (Respostas: 1; Visualizações: 416)

  1. Opa pessoal eu tou com um problema na hora de colocar e ajustar sub menus no meu codigo css e não estou conseguindo inseir os sub menus para amostrarem de acordo com o que eu quero por favor me ajuda deem uma olhada no codigo para min e se poderem me ajudar agradeceria!


    <-------- codigo CSS --------->
    Código:
    {
        margin:0;
        padding:0;
    }
    body{
        font:14px Georgia, "Times New Roman", Times, serif;
    }
    ul{
        list-style-type:none;
    }
    ul#menuSub{
        width:600px;
        margin:0 auto;
    }
    ul#menuSub li{
        position:relative;
        float:left;
    }
    ul#menuSub li a{
        display:block;
        float:left;
        padding:0 15px;
        height:30px;
        line-height:30px;
        background:#033;
        color:#FFF;
        text-decoration:none;
    }
    
    ul#menuSub li a:hover{
        background:#CCC;
        color:#000;
    }
    
    ul#menuSub li ul {
        display:none;
        position:absolute;
        top:30px;
        left:0;
    }
    
    ul#menuSub li:hover ul {
        display:block;
    }
    
    ul#menuSub li ul a{
        width:130px;
        border-bottom:1px solid #FFF;
    }
    
    Código:
    <-------Codigo HTML-------->
    
    CODE
    <html>
    <head>
    <title>menuSub</title>
    <link href="MenuSub.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <ul id="menuSub">
        <li><a href="#">Home</a></li>
        <li><a href="#">Cursos</a></li>
            <ul>
                <li><a href="#">Informatica</a></li>
                <li><a href="#">Enfermagem</a></li>
                <li><a href="#">Vestuario</a></li>
                <li><a href="#">Hospedagem</a></li>
            </ul>
            <li><a href="#">Projetos</a></li>
            <li><a href="#">Historia</a></li>
            <li><a href="#">NossaEquipe</a></li>
    </ul>
            
    
    
    </body>
    </html>
    
     
  2. Boas
    Tens aí um pequeno erro,o segundo <ul> tem de estar dentro do <li> dos Cursos,assim:
    Código:
    <ul id="menuSub">
        <li><a href="#">Home</a></li>
        <li><a href="#">Cursos</a>
            <ul>
                <li><a href="#">Informatica</a></li>
                <li><a href="#">Enfermagem</a></li>
                <li><a href="#">Vestuario</a></li>
                <li><a href="#">Hospedagem</a></li>
            </ul>
        </li>
        <li><a href="#">Projetos</a></li>
        <li><a href="#">Historia</a></li>
        <li><a href="#">NossaEquipe</a></li>
    </ul>
    Aconselho-te a alterar o valor do "left" do estilo "ul#menuSub li ul" para -40px,assim fica mesmo abaixo da opção "Cursos".
    Cumps
     

Partilhar esta Página