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

Ajuda menu drop down em css

Discussão em 'Web Development' iniciada por eRKULIX, 4 de Abril de 2008. (Respostas: 5; Visualizações: 624)

  1. eRKULIX

    eRKULIX Suspenso

    Boas

    Será que alguém me pode ajudar a alterar em menu drop-down, para que os primeiros links fiquem na horizontal uns a seguir aos outros e não uns por baixo dos outros.

    Obrigado!


    CSS:

    Código:
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
    	}
    	
    ul li {
    	position: relative;
    	}
    	
    li ul {
    	position: absolute;
    	left: 149px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;
    	}
    
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc; /* IE6 Bug */
    	border-bottom: 0;
    	}
    	
    /* Holly Hack. IE Requirement \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    li:hover ul, li.over ul { display: block; } /* The magic */
    


    O menu propriamente dito

    Código:
    <ul> 
      <li><a href="#">MENU 1</a></li> 
      <li><a href="#">MENU 2</a> 
        <ul> 
          <li><a href="#">MENU 2.1</a></li> 
          <li><a href="#">MENU 2.2</a></li> 
          <li><a href="#">MENU 2.3</a></li> 
        </ul> 
      </li> 
      <li><a href="#">MENU 3</a> 
        <ul> 
          <li><a href="#">MENU 3.1</a></li> 
          <li><a href="#">MENU 3.2</a></li> 
        </ul> 
      </li> 
      <li><a href="#">MENU 4</a> 
        <ul> 
          <li><a href="#">MENU 4.1</a></li> 
          <li><a href="#">MENU 4.2</a></li> 
          <li><a href="#">MENU 4.3</a></li> 
        </ul> 
      </li> 
    </ul> 
     
  2. hostmake

    hostmake Power Member

    que lol ^^


    display:inline;
    na classe ul
     
  3. eRKULIX

    eRKULIX Suspenso

    Não funcionou, mas acho que já arranjei solução para nisso.

    No entanto estava a pensar no mouse over por o fundo a mudar de cor.

    Se fizer no a hover{background: #fff} por exemplo somente muda a área do texto. Há alguma forma de mudar todo o rectângulo?


    Obrigado
     
  4. hostmake

    hostmake Power Member

    Comigo funciona, display: inline, funciona sempre, deves te ter enganado.



    li a:hover {background-color:#ccc; }
     
  5. eRKULIX

    eRKULIX Suspenso

    Estou a colocar:

    Código:
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
            display: inline;
    	}
    Mas nada... não é assim?


    Obrigado pela outra indicação.
     
  6. hostmake

    hostmake Power Member

    Eu sou um bocado estúpido de vez em quando, experimenta no li que já vai dar!
     

Partilhar esta Página