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

[AJUDA] Dropdown menu em css

Discussão em 'Web Development' iniciada por Theocrat, 5 de Maio de 2011. (Respostas: 3; Visualizações: 1375)

  1. Boas!

    Eu tenho um drop down menu feito em html/css mas so tem um nivel de submenu e eu queria por mais um nivel so que nao consigo.
    Este e o codigo
    Codigo
    .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode"
    font-size:14px;
    font-weight:bold;
    }
    .menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:#333333 url("images/seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    }
    .menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    }
    .menu li:hover ul{
    display:block;
    }
    .menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
    .menu li:hover li a{
    background:none;
    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
    .menu p{
    clear:left;
    }


    Se alguem me pudesse ajudar agradecia!
    cumprimentos
     
    Última edição: 5 de Maio de 2011
  2. PMPP

    PMPP Power Member

    Quero-te ajudar, mas assim dá muito trabalho e sou preguiçoso, podes por um exemplo com html + css?
     
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
    </head>
    <body>
    <br>
    <br>
    <div class="menu">
    <ul>
    <li><a href="#" >Home</a></li>
    <li><a href="#" id="current">Staff</a>
    <ul>
    <li><a href="#">Drop Down CSS Menus</a></li>
    <li><a href="#">Horizontal CSS Menus</a></li>
    <li><a href="#">Vertical CSS Menus</a></li>
    <li><a href="#">Dreamweaver Menus</a></li>
    </ul>
    </li>
    <li><a href="/faq.php">FAQ</a>
    <ul>
    <li><a href="#">Drop Down CSS Menus</a>
    <ul>
    <li><a href="#">Horizontal</a></li>
    <li><a href="#">Vertical</a></li>
    </ul>
    </li>
    <li><a href="#">Horizontal CSS Menus</a></li>
    <li><a href="#">Vertical CSS Menus</a></li>
    <li><a href="#">Dreamweaver Menus</a></li>
    </ul>
    </li>
    <li><a href="/contact/contact.php">Contact</a></li>
    </ul>
    </div>

    </body>
    </html>
    <--------------------------------------------------------------->
    .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode"
    font-size:14px;
    font-weight:bold;
    }
    .menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:#333333 url("images/seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    }
    .menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    }
    .menu li:hover ul{
    display:block;
    }
    .menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
    .menu li:hover li a{
    background:none;
    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
    .menu p{
    clear:left;
    }
     

Partilhar esta Página