locked
Ajuda com Menu CSS RRS feed

  • Pergunta

  • Ae pessoal , estou com um problema com um menu horizontal simples. gostaria de aumentar o height dos li do menu, para que o fundo pintado seja maior porém tentei aplicar a prorpeidade height em varias das classes css do menu e nao obtive sucesso. Abaixo vai o código do menu:

    <div id="divMenu" runat="server" class="menu_div">
              <ul class="menu">                  
              <li><a href="#" class="current">Home</a></li>
              <li><a href="#">Empresa</a></li>
              <li><a href="#">Produtos</a></li>
              <li><a href="#">Parceiros</a></li>
              <li><a href="#">Contato</a></li>

         </ul>

    </div>

    Meu CSS:

    .menu
    {
        margin-top: 34px;
        float: right;
        font: normal 13px Arial;
    }
    .menu li
    {
        display: inline;            <------ Aqui eu gostaria de setar um tamanho pro LI para que o

        margin-right: 6px;                 fundo de cada item do menu seja maior que o por default.
    }                                              por exemplo:
    .menu li a                                 --------------
    {                                             |                |
        color: white;                         |                |
        text-decoration: none;           |    HOME   |
        padding: 9px 25px;               |                |
    }                                              |               |
    .menu li a:visited                       |_________|
    {
        color: white;
    }
    .menu li a:hover
    {
        color: white;

        font-weight: bold;

       background-color: #166ab0;
    }
    .menu li .current
    {   
        font-weight: bold;     

       background-color: #166ab0;

    }

     

    Alguem tem alguma idéia?

    Muito obrigado.

    quinta-feira, 8 de julho de 2010 12:53

Todas as Respostas

  • João,

    tente algo assim:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
     <style>
        #divMenu{
           
        }
        ul{
       
        }
       
        li{
        display:inline;
        height:50px;
        line-height:50px;
        }
       </style>
    </head>

    <body>
    <div id="divMenu" runat="server">
              <ul>                 
              <li><a href="#">Home</a></li>
              <li><a href="#">Empresa</a></li>
              <li><a href="#">Produtos</a></li>
              <li><a href="#">Parceiros</a></li>
              <li><a href="#">Contato</a></li>

         </ul>

    </div>
    </body>
    </html>

     

    Att,

    Fabio

    terça-feira, 13 de julho de 2010 02:32