...

View Full Version : drop-down menu



Cloie
02-27-2012, 07:12 PM
Im trying to implement drop-down menu using html and css. On menu item hover it show drop-down menu as i want. But it has another width at top and down, as you can see at image. Also last menu item is pushed out of "menu panel".

can someone give me a hand?


.css

#menu ul {
width:1090px;
height:40px;
position:absolute;
top:160px;
left:0px;
border:1px solid black;
opacity:0.6;
background-color:#360;
list-style-type: none;
margin: auto;
}
#menu li{
float:left;
width:auto;
}
#menu ul a {
margin-top:8px;
margin-left:19px;
margin-right:19px;
display: block;
line-height: 20px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: black;
}
#menu ul a:hover {
color: #FFF;
}
#menu li ul {
display: none;
width:90px;
/* Width to help Opera out */
background-color: #360;
}
#menu li:hover ul {
display: block;
position: relative;
top:0px;
left:0px;
width:auto;
margin: 0;
padding: 0;
}
#menu li:hover li {
float: none;
}
#menu li:hover li a {
background-color: #360;
border-bottom: 1px solid #fff;
color: #000;
}
#menu li li a:hover {
background-color:#2AFF00;
}

.html

<div id="menu">
<ul>
<li id="Home"><a href="#">Home</a></li>
<li id="Kalendar"><a href="#">Kalendár akcií</a></li>
<li id="Archiv"><a href="#">Archív hier</a></li>
<li id="Uzivatelia"><a href="#">Hráči</a></li>
<li id="Teamy"><a href="#">Teamy</a></li>
<li id="Shopy"><a href="#">PB/Army shopy</a></li>
<li id="Ihriska"><a href="#">Ihriská</a></li>
<li id="Forum"><a href="#">Forum</a>

<ul>
<li><a href="#">SK FORUM</a></li>
<li><a href="#">CZ FORUM</a></li></ul></li>


<li id="FAQ"><a href="#">FAQ</a></li>
</ul>
</div>

printscreen:
http://uploading.sk/?v=beznzvzoz.png

abduraooft
02-29-2012, 05:39 AM
I'd recommend you to check http://www.htmldog.com/articles/suckerfish/dropdowns/ to see how to easily build a dropdown menu.

TheAliveWinner
02-29-2012, 08:24 AM
Try this!

#menu li ul{
left: -9999px; /*Better to use instead of 'display: none;' */

width:90px; /* Width to help Opera out */
background-color: #360;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum