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