No replies
brianmayfan123
brianmayfan123's picture
Offline
newbie
UK
Last seen: 10 years 7 weeks ago
UK
Joined: 2013-01-29
Posts: 1
Points: 2

Hi there guys,
Complete CSS noob here

I've had a look on this site and elsewhere on the web but I cant seem to find a straight forward answer to my problem
I need to convert my website's current navigation bar so the current menu buttons are static, and when hovered over, reveal a drop down menu with clickable links

I'm ok finding my way around HTML but CSS is something i've yet to master

Can anyone advise a way to get the above results?

Heres my CSS

body {
	margin: 0px;
	height: 100%;
	background-image: url(../img/bg_main.png);
}
 
@font-face {
    font-family: Logo;
    src: url(font/minecraft_font_by_pwnage_block-d37t6nb.ttf);
}
 
#header {
	background:#8cbeff;
	background-image: url(../img/180px-Sun.png), url(../img/bg-outside-clouds.png);
	background-position: center right, top;
	background-repeat: no-repeat;
	width: 100%;
	padding: 20px 0;
	margin:0;
	overflow: hidden;
}
 
#logo {
	margin: 0px auto;
	margin-bottom: -50px;
	width: 990px;
	font-size: 30px;
}
 
#logo h1 {
	color: #222;
	text-shadow:0 0 30px #333;
}
 
#logo h1:before {
	content:"Conner";   /* Yellow Text */
	color: yellow;
	font-family: Logo;
}
 
#logo h1:after {
	content: "Craft";  /* Black Text */
	font-family: Logo;
}
 
#nav {
	margin-top: -20px;
	margin-bottom: -5px;
	background-color:#2b2b2b;
	border-bottom:4px solid #444442;
	font-size:15px;
	height:36px;
	-webkit-box-shadow:0 0 5px #666; 
	-moz-box-shadow: 0 0 5px #666; 
	box-shadow:0 0 5px #666;
	border-top: 10px solid #009514;
	position: relative;
	z-index: 9999;
	}
 
#nav_holder {
	width: 1000px;
	margin: 0px auto;
	margin-top: -15px;
}
 
#nav_holder ul.right {
	float: right;
	margin-top: 0px;
	margin-right: 10px;
}
 
#nav_holder li.first {
	margin-left: -30px;
	border-left: 1px solid #333;
    box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
    -moz-box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
    -webkit-box-shadow: 1px 0 #000 inset, -1px 0 #000 inset; 
    text-shadow:0 0 1px #000;
}
 
 
#nav_holder li {
	list-style: none;
	float: left;
	border-right: 1px solid #333;
    box-shadow: -1px 0 #000 inset;
    -moz-box-shadow: -1px 0 #000 inset;
    -webkit-box-shadow: -1px 0 #000 inset;  
    text-shadow:0 0 1px #000;
}
 
#nav_holder li a {
	line-height: 36px;
	text-decoration: none;
	color: #FFF;
	opacity: 0.7;
	margin-right: 20px;
	margin-left: 20px;
	transition: color .2s linear;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	font-size: 12px;
	color: yellow;
	font-family: Logo;
}
#nav_holder li a:hover {
	opacity: 0.9;
	color: #00a5f0;	
	transition: color .2s linear;
	-webkit-transition: color .1s linear;
	-moz-transition: grow .1s linear;
}
 
#nav_holder li a:active {
	opacity: 1;
	color: #000;
	width: 300px;
}
 
/* Now the header is done */
 
 
/* Main Content */
 
.sub_header {
	width: 960px;
	min-height: 105px;
	margin: 0px auto;
	padding: 10px;
	background: url(../img/planks.jpg);
	border: 4px solid #56472A; 
	-moz-box-shadow: -2px 2px 3px #333; 
	-webkit-box-shadow: -2px -2px 3px #333; 
	box-shadow: -2px -2px 3px #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 14px;
	z-index: 9;
	position: relative;
}
 
 
#content_container {
	width: 950px;
	margin: 0px auto;
	margin-top: 10px;
}
 
.sidebar {
	margin-bottom: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border-top: 2px inset black;
	border-bottom: 2px outset black;
	background-image:url(../img/sidebar.png);
	width: 249px;
	float: left;
}
 
.sidebar h1,h2,h3,h4,h5,h6,p{
	padding-left: 20px;
	font-family: 'Sanchez', serif;
}
 
.sidebar h3.address {
	margin-bottom: -10px;
}
 
.sidebar div.online {
	float: right;
	margin-right: 40px;
	margin-top: -36px;;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	background-color: green;
	box-shadow: 0px 0px 2px 2px green;
}
 
.sidebar div.offline {
	float: right;
	margin-right: 40px;
	margin-top: -36px;;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	background-color: red;
	box-shadow: 0px 0px 2px 2px red;
}
 
.sidebar p.address {
	color: green;
}
 
.right_content {
	background-image:url(../img/right_content.png);
	float: right;
	margin-top: 3px;
	margin-bottom: 30px;
	min-height: 200px;
	border: 4px solid #222;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 10px rgba(000, 0, 0, 1);
	-moz-box-shadow:    0px 0px 10px rgba(000, 0, 0, 1);
	box-shadow:         0px 0px 10px rgba(000, 0, 0, 1);
	width: 660px;
	color: #999;
}
 
.right_content h1,h2,h3,h4,h5,h6,p {
	padding-left: 30px;
	margin-right: 30px;
}
 
.right_content h1 {
	color: #999;
	text-shadow: 1px 1px 1px #000;
	width: 300px;
	margin-top: 0px;
	background-color: #222;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
}
 
.footer {
	text-align: Center;
	font-size: x-small;
}

And my HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8">
 
<!-- Site Title -->
<title>ConnerCraft | Groups</title>
 
<!-- Styles -->
<link rel="stylesheet" href="style/layout.css">
<link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'> <!-- Google Font (Replace with own if needed) -->
 
 
<!-- Site Header -->
<div id="header">
	<div id="logo">
		<h1></h1> <!-- Site's Title on line 36 and 42 in layout.css  -->
	</div>
</div>
 
	<!-- Navigation Bar -->
 
	<div id="nav">
		<div id="nav_holder">
 
			<ul>
				<li class="first"><a href="index.html"> Home </a> </li>
				<li><a href="livemap.html"> Live Map </a> </li>
				<li><a href="gallery.html"> Gallery </a> </li>
				<li><a href="serverinfo.html"> Server Info </a> </li>
				<li><a href="rules.html"> Rules</a> </li>
                <li><a href="brokenpage.html"> Groups</a> </li>
				<li><a href="brokenpage.html"> Downloads </a> </li>
				<li><a href="brokenpage.html"> Forum </a> </li>
				<li><a href="contact.html"> Contact Us </a> </li>
			</ul>	
		</div>
	</div>
 
 
 
		<!-- Content Container -->
 
		<div id="content_container">
 
 
		<!-- Right Content -->
 
		<div class="right_content">
 
 
      <p>To maintain some order on ConnerCraft you will find yourself within one of several groups</p>
 
	    <p><u><big><FONT COLOR="33FFFF">Builder</big></FONT></u>
        <br>By default players will find themselves in this group. In this group you can interact with the world and play the game as you would normally on SSP with no admin access.
		<br>This group has access to non admin/creative commands from Essentials, and the ability to protect chests and doors using Lockette
		<br>TNT placement, Lava Bucket and Flint & Steel use is prohibited</br></p>
 
		<p><u><big><FONT COLOR="FF33FF">Mod</big></FONT></u>
        <br>By default players will find themselves in this group. In this group you can interact with the world and play the game as you would normally on SSP with no admin access.
		<br>This group has access to non admin/creative commands from Essentials, and the ability to protect chests and doors using Lockette
		<br>TNT placement, Lava Bucket and Flint & Steel use is prohibited</br></p>
 
		<p><u><big><FONT COLOR="CC0033">Admin</big></FONT></u>
        <br>By default players will find themselves in this group. In this group you can interact with the world and play the game as you would normally on SSP with no admin access.
		<br>This group has access to non admin/creative commands from Essentials, and the ability to protect chests and doors using Lockette
		<br>TNT placement, Lava Bucket and Flint & Steel use is prohibited</br></p>
 
		<p><u><big><FONT COLOR="FFFF00">View Only</big></FONT></u>
        <br>Players in the View Only group will be able to interact with switches and doors, as well as attack mobs and receive damage as normal, however placing and destroying blocks is prohibited.
		<br>Access to all but the most basic help commands is restricted
		<br>TNT placement, Lava Bucket and Flint & Steel use is prohibited. Users in this group cannot interact with Chests, Furnaces, Crafting Tables, Brewing Stands, Enchantment Tables or Jukeboxes</br></p>
 
 
 
 
      <h3><u></u></h3>
      <p> </p>
 
 
 
 
		<div class="footer">
 
		<p>Copyright &copy; 2012 - ConnerCraft
 
		</div>
 
		</div>
 
 
		<div class="sidebar">
 
		<h3 class="address">Server Address</h3>
		<p class="address">85.25.243.232:25571</p>
 
		</div>
 
		<div class="sidebar">
 
						<!-- Change To Online or Offline depending on your server status -->
		<h3>Server Status: </h3> <div class="online"></div>
 
		</div>
 
		<div class="sidebar">
 
		<h3> Donate </h3>
		<p><small>If you would like to donate towards the upkeep of ConnerCraft we would appreciate it. All Donations are sent to a paypal account which is used to pay our monthly server fees</small></p>
 
 
</body>
</html>
 
 
<code>
 
 
Thanks.
I appreciate any help you guys can give