Menu
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.
[URL=”http://www.ugloungemc.com/”]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.