CSS DropDown Menu

**Wnt2bsleepin** · 10-18-2012, 08:04 PM

Hello, I am a beginner designing a basic website. I am having a hard time making a drop down menu work, specifically with the hover pseudo class. I am able to hide the ul with the hidden property, but itis not showing up when I hover.

ugloungemc.com

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Underground Lounge Minecraft</title>
<link rel="stylesheet" type="text/css" href="css/core.css" />  
</head>


<body>
 

<div class="main"> 

<div class="header"> 
<img src="images/logo.png" alt="placeholder" height="38px" width="350"/>


<ul id="menu">
<li><a href="#">Plugins</a>
	<ul>
		<li><a href="#">SimpleBounty</a></li>
		<li><a href="#">List</a></li>
	</ul> 
</li>
<li><a href="#">Rules</a>
	<ul id="rulesub">
		<li><a href="#">PVP Server</a></li>
		<li><a href="#">PVE Server</a></li>
	</ul> 
</li>
<li><a href="#">Forums</a></li>
<li><a href="#">Staff</a>
	<ul id="staffsub">
		<li><a href="#">PVP Server</a></li>
		<li><a href="#">PVE Server</a></li>
	</ul> 
</li>
<li><a href="#">Donate</a></li>
<li><a href="#">Stats</a>
	<ul id="statsub">
		<li><a href="#">McMMO</a></li>
		<li><a href="#">Bounty</a></li>
		<li><a href="#">Clans</a></li>
	</ul> 
</li> 
</ul> 

</div> 

<div id="rotatingpics">
<p>PlaceHolder</p> 
</div>

<div id="info">  

<div class="infobox">
<h2>Why UgLounge Servers?</h2>
<p>Put it simply; it is because these servers are here for you.
These servers aren't to make money, or so someone could enjoy using 
cheat commands. They are there simply for you; the player.</p> 
</div> 

<div class="infobox">
<h2>What about lag?</h2> 
<p>Lag. An infamous problem on many Minecraft servers. Rest 
assured our servers are hosted using mclayer, and we strive to provide a 
lag free experience for our community.</p> 
</div>  
<div class="infobox">

<h2>Donations</h2>
<p>There is no "Pay-to-Win" model used here like other servers. Our goal 
is to keep things enjoyable for <b>ALL</b> players; not just the ones 
with deeper pockets. We do accept donations though, and there are perks 
for donors. Check the donate page for more information.</p>
</div> 

<div class="infoboxsmall">
<h2>Server IPs</h2>
<p>PVP Server: uglounge.mclayer.com</p>
<p>PVE Server: 198.12.127.2:25568</p> 
 </div>  

 
</div> <!--End info--> 
 
</div> <!--End main--> 
 
</body> 

</html>

CSS:

Code:

body{
/*background-color:#00FFFF;*/ 
background-image:url("../images/background.png");
background-repeat:repeat; 

}

#menuholder, ul, a, li {
text-decoration: none; 
list-style-type:none; 
padding: 0;
margin: 0; 
}


.header{
width:800px;
height:60px; 
margin-left:auto;
margin-right:auto; 
}


li, #menu{
display: inline; 
padding-left: 20px; 
margin-right: 0;
margin-left: 0; 
} 

.main {
margin-right: auto;
margin-left: auto; 
width:1000px; 
height:1000px; 
} 

#info, div{
width: 800px;
height:300px; 
margin-left: auto;
margin-right: auto;
}

div.infobox{
display: block; 
width:190px;
height:250px; 
margin-right: auto; 
margin-left:auto; 
padding: 5px 20px 10px 5px; 
float:left; 
}  


#rotatingpics {
height:300px;
width: 800px; 
border: 1px solid black; 
margin-left:auto;
margin-right:auto; 
margin-top:20px; 
} 

span.infoboxsmall{
padding-right:0;
display: block; 
width:150px;
height:250px; 
margin-right: auto; 
margin-left:auto; 
float:left; 
} 

#menu li ul{
display: none; 
} 

#menu li a:hover {
display:block;
color:red; 
} 


#staffsub{
display:none;
}

#rulesub{
display:none;
}

#statsub{
display:none; 
}

Thank you.