ksmith09 Posted April 25, 2014 Share Posted April 25, 2014 I am making a header/nav bar for a website and I have all of the basics done and it works. Now what I need to do is add drop downs below some of the menu items, for ex. Roster>raid Roster and a guild roster option that leads to different pages. I have tried with no success, help would be appreciated. I wrote this by using this site and learning the different aspects of it but i just can't get a drop down to work. This is the Htlm I have written and the second is my css file. <!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>Moment Of Reckoning</title> <link rel="stylesheet" href=main.css> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'></head><body> <div id="big_wrapper"> <header id="top_header"> <h1><a href="http://www.momentofreckoning.enjin.com"><img src="http://files.enjin.com/283393/Logo%20MOR/coollogo_com-89272111.png" /></a><h1> </header> <nav id="top_menu"> <ul class="kwicks kwicks-horizontal"> <li class="pan1"><a href="http://momentofreckoning.enjin.com/about">About</a><div class="navtext"> <li class="pan1"><a href="http://momentofreckoning.enjin.com/forum">Forums</a><br /><div class="navtext"> <li class="pan2"><a href="http://momentofreckoning.enjin.com/events">Events</a><div class="navtext"> <li class="pan3"><a href="http://momentofreckoning.enjin.com/activity">Rosters</a><div class="navtext"> <li class="pan4"><a href="http://momentofreckoning.enjin.com/recruitment">Applications</a><div class="navtext"> <li class="pan1"><a href="http://momentofreckoning.enjin.com/media">Media</a><div class="navtext"> <li class="pan2"><a href="http://momentofreckoning.enjin.com/guildpolicy">Policies</a><div class="navtext"> <li class="pan3"><a href="http://us.battle.net/wow/en/guild/area-52/Moment_of_Reckoning/">Armory</a><div class="navtext"> <li class="pan4"><a href="http://momentofreckoning.enjin.com/admin/contact">Contact Us</a><div class="navtext"> </ul> <div class="clear"></div> </nav><i></i><Body></html> a:link {color:#c97d0c;} /* unvisited link */a:visited {color:#c97d0c;} /* visited link */a:hover {color:#c97d0c;} /* mouse over link */a:active {color:#c97d0c;} /* selected link */a:link {text-decoration:none;} h1{ position: absolute; top: 10px; left: 200px;}#big_wrapper{position: relative; width: 1040px; height: 198px; margin: 10px auto -10px; }#top_header{ background:transparent; padding: 20px; }#top_menu{ border-top: 2px solid #c97d0c; /*color and size of line*/ width: 1040px; /*How long line is*/ margin: 80px auto; /*How far from top line is*/ background: transparent; /*color of box under line*/ padding: 0;}#top_menu li{ display:inline-block; list-style:none; padding: 5px; font-size: 20px; font-weight:bold; font-family: 'Open Sans Condensed', 'sans-serif'; }.kwicks > li a { width: 100%; padding: 25px 25px 20px 20px; position: relative;}#enjin-bar a {color: #777 !important;}#enjin-bar a:hover {color: #ffe00b !important;}#enjin-tray {opacity: 0.9;} Thanks in advance! Link to comment Share on other sites More sharing options...
JobPencil Posted May 5, 2014 Share Posted May 5, 2014 Try This Link It may Help you... http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now