Hello, on my website; mingul.co.uk I have a Navigation bar which I would like to be able to turn into a Drop Down Navigation Bar on one of the things "PMC".
I'm not sure how to go about this, as I suck at Navigation bars. If you could help I'd appreciate it.
CSS for navigation bar..
.wrapper {
width: 100%;
height: 80px;
background: -moz-linear-gradient(center top , rgb(168, 168, 168), rgb(69, 69, 69)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center top, center bottom, from(rgb(168, 168, 168)), to(rgb(69, 69, 69)));
border-top: 2px solid rgb(147, 147, 147);
position: relative;
margin-bottom: 0;
}
.container {
width: 960px;
margin: 0px auto;
}
.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
float: left;
}
div.menu {
height: 80px;
border-left:1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
div.menu a:first-child {
border-left: 0;
}
div.menu div {
list-style: none outside none;
float: left;
height: 79px;
text-align: center;
background: -moz-radial-gradient(center 80px 45deg, circle farthest-corner, rgb(31, 169, 244) 0%, rgb(0, 28, 78) 100%) repeat scroll 0% 0% transparent;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgb(31,169,244)), to(rgb(0,28,78)) );
}
div.menu a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, center top, center bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
div.menu a:hover {
background: transparent none;
}
div.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
HTML for index.html..
<html>
<head>
<title>Mingul - Get Your Daily Dose of Mingul!</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="menu.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="wrapper">
<div class="container"><div class="menu" rel="sam1">
<div class="active"><a href="/index.html">Home</a></div>
<div><a href="/Donate.html">Donate</a></div>
<div><a href="http://www.minecraftforum.net/topic/1469018-launching-soon-details-inside-mingul-132-survival/">Forums</a></div>
<div><a href="#">News</a></div>
<div><a href="#">Updates</a></div>
<div><a href="http://www.planetminecraft.com/server/mingul-132-survival-capture-the-flag-mob-arena-spleef-pvp-donator-ranks-anti-grief//">PMC</a></div>
<div><a href="http://www.facebook.com/MCMingul">Facebook</a></div>
</div>
</div>
</div>
<marquee>We're currently updating the website. It may go blank or crash out. We are working to improve our website.</marquee>
<div class="bg">
<div class="container_12">
<div class="grid_6"><a href="http://www.mingul.co.uk"><img src="images/logo.png" alt="" /></a></div>
<div class="grid_6">
</div>
<div class="clear"></div>
<div class="grid_12" id="content">
<div class="content-spacer">
Lynn Currently Has ...
<p><img src="http://julialondon.com/wp-content/uploads/gold-star.png" height="50" width="50"> <img src="http://julialondon.com/wp-content/uploads/gold-star.png" height="50" width="50"> <img src="http://julialondon.com/wp-content/uploads/gold-star.png" height="50" width="50"> <img src="http://julialondon.com/wp-content/uploads/gold-star.png" height="50" width="50"></p>
<br >
Matt Currently Has ...
<p><img src="http://julialondon.com/wp-content/uploads/gold-star.png" height="50" width="50"> <img src="http://julialondon.com/wp-content/uploads/gold-star.png" height="50" width="50"> </p>
<h2>Welcome to Mingul</h2>
<p>Mingul is an independent server, run by the thriving community of Minecraft. The staff and players make Mingul what it is today. Take a look around the website to get a feel for Mingul, or jump straight in at <a href="#">mc.mingul.co.uk</a></p>
<p>We've got rules set in place to ensure everyone has fun but isn't too limited. We have plugins in place to rollback and ban griefers. We do our best to prevent this at all, but sometimes griefers get the better on any server.</p>
<h2>Teamspeak</h2>
<p>If you've been with Mingul before, you'll remember the crazy times we had on the Mingul Teamspeak Server. Well, we're glad to tell you the Teamspeak is back! Forgotten Mingul FM? You'll remember soon enough. Head over to;
<a href"#">193.0.159.15:9988</a> on Teamspeak and join in the fun. </p>
<h2>Founders</h2>
<p>Want to talk to one of the Founders? Sometimes, the Founders won't always be on. Sometimes they'll all be on at once. It just depends on other things in their lives. However, be sure they do make a lot of time for Mingul.</p>
<p>The Founders are; chocants (Jadon), minecraftmatt86 (Matt) and Lynnm (Lynn). We have all of these Founders to thank for individual parts of the Server. We have chocants to thank for creating the Spawn(s), Configuring Plugins and Setting up the Teamspeak and Website. However, we have Lynnm to thank for building the Beach, Docks, Shops and Boat in Spawn. Nevertheless, we cannot forget minecraftmatt86 who made the Capture The Flag. What an impressive team!</p>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div></div>
<div id="footer">
<div class="container">
<p class="copyright">Copyright © 2012. All Rights Reserved. </p>
<a href="http://minestatus.net/47328-mingul-survival-server"><img src="http://minestatus.net/47328-mingul-survival-server/image/original.png" alt="Mingul Survival Server"></a>
</div>
</div>
</body>
</html>
Thank You for your help.
