View Full Version : Ajuda menu drop down em css


eRKULIX
04-04-2008, 17:49
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:


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

<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>

hostmake
04-04-2008, 20:02
que lol ^^


display:inline;
na classe ul

eRKULIX
04-04-2008, 22:50
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

hostmake
04-04-2008, 23:33
Comigo funciona, display: inline, funciona sempre, deves te ter enganado.



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

eRKULIX
05-04-2008, 00:50
Comigo funciona, display: inline, funciona sempre, deves te ter enganado.


Estou a colocar:

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.

hostmake
05-04-2008, 01:06
Eu sou um bocado estúpido de vez em quando, experimenta no li que já vai dar!