www.webdeveloper.com
Results 1 to 3 of 3

Thread: HELP. Why won't my css drop down work correctly?

  1. #1
    Join Date
    Jul 2010
    Posts
    6

    Exclamation HELP. Why won't my css drop down work correctly?

    So i'm adding a css dropdown to my site.
    I made a test page and it worked fine, but when I add the code to the actual site it shows up wrong. This is probably just a simple mistake, but somehow I seem to be missing it. Any help would be greatly appreciated! Thanks!

    P.S. I had to take some of the page out so it would fit in this entry (: and the menu isnt the actual menu!

    HTML code:
    HTML Code:
    <body>
    <div id="header-wrapper">
    	<div id="header" class="container">
    		<div id="logo">
    			<h1><a href="#"><img src="images/logo.png" class="floatLeft"/>Erindale Chiropractic</a></h1>
    			<p></p>
    		</div>
    		<nav>
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Tutorials</a>
    			<ul>
    				<li><a href="#">Photoshop</a></li>
    				<li><a href="#">Illustrator</a></li>
    				<li><a href="#">Web Design</a>
    					<ul>
    						<li><a href="#">HTML</a></li>
    						<li><a href="#">CSS</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li><a href="#">Articles</a>
    			<ul>
    				<li><a href="#">Web Design</a></li>
    				<li><a href="#">User Experience</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Inspiration</a></li>
    	</ul>
    </nav>
    	</div>
    	<div id="banner" class="container">
    		<div class="image-style"><img src="images/img03.jpg" width="970" height="320" alt="" /></div>
    	</div>
    </div>
    

    CSS Code:

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #961D46 url(images/img01.jpg) repeat;
    	font-family: 'Open Sans Condensed', sans-serif;
    	font-size: 16px;
    	color: #8A8985;
    }
    
    h1, h2, h3 {
    	margin: 0;
    	padding: 0;
    	font-weight: normal;
    	color: #7D7764;
    }
    
    h1 {
    	font-size: 2em;
    }
    
    h2 {
    	font-size: 2.8em;
    }
    
    h3 {
    	font-size: 1.6em;
    }
    
    p, ul, ol {
    	margin-top: 0;
    	line-height: 180%;
    }
    
    ul, ol {
    }
    
    a {
    	text-decoration: none;
    	color: #CA4C44;
    }
    
    a:hover {
    }
    
    #wrapper {
    	overflow: hidden;
    	background-color: #FFFFFF;
    }
    
    .container {
    	width: 1000px;
    	margin: 0px auto;
    }
    
    /* Header */
    
    #header-wrapper {
    	overflow: hidden;
    	height: 600px;
    	background: url(images/img02.jpg) repeat-x left top;
    }
    
    #header {
    	width: 960px;
    	height: 200px;
    	margin: 0 auto;
    	padding: 0px 20px;
    	background: url(images/img01.jpg) no-repeat left top;
    }
    
    /* Banner */
    
    #banner {
    	overflow: hidden;
    	height: 400px;
    	background: url(images/img04.jpg) no-repeat center bottom;
    }
    
    #banner .image-style {
    	border: 15px solid #F4F4F4;
    }
    
    
    /* Logo */
    
    #logo {
    	float: left;
    	width: 450px;
    	margin: 0;
    	padding: 0;
    	color: #000000;
    }
    
    #logo h1, #logo p {
    }
    
    #logo h1 {
    	padding: 60px 0px 0px 0px;
    	letter-spacing: 0px;
    	font-size: 2.7em;
    	font-family: Tahoma, Geneva, sans-serif;
    }
    
    #logo h2 {
    	color: #ffffff;
    	letter-spacing: 0px;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 2.4em;
    }
    
    #logo p {
    	margin-top: -10px;
    	padding: 0px 0px 0px 5px;
    	font-size: 22px;
    	color: #FFFFFF;
    } 
    
    #logo p a {
    	color: #FFFFFF;
    }
    
    #logo a {
    	border: none;
    	background: none;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Splash */
    
    #splash {
    	overflow: hidden;
    	padding: 0px 0px 50px 0px;
    	border-bottom: 1px dashed #E7E2DC;
    	letter-spacing: -3px;
    	text-align: center;
    	font-size: 48px;
    }
    
    #splash span {
    	color: #313131;
    }
    
    
    
    /* Search */
    
    #search {
    	float: right;
    	width: 280px;
    	height: 60px;
    	padding: 20px 0px 0px 0px;
    }
    
    #search form {
    	height: 41px;
    	margin: 0;
    	padding: 10px 0 0 20px;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search-text {
    	width: 170px;
    	padding: 6px 5px 2px 5px;
    	border: 1px solid #DEDEDE;
    	background: #FFFFFF;
    	font: normal 11px Arial, Helvetica, sans-serif;
    	color: #5D781D;
    }
    
    #search-submit {
    	width: 50px;
    	height: 22px;
    	border: none;
    	background: #B9B9B9;
    	color: #000000;
    }
    
    /* Menu */
    
    nav {
    	margin: 100px auto; 
    	text-align: center;
    }
    
    nav ul ul {
    	display: none;
    }
    
    	nav ul li:hover > ul {
    		display: block;
    	}
    
    
    nav ul {
    	background: #efefef; 
    	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    	padding: 0 20px;
    	border-radius: 10px;  
    	list-style: none;
    	position: relative;
    	display: inline-table;
    }
    	nav ul:after {
    		content: ""; clear: both; display: block;
    	}
    
    	nav ul li {
    		float: left;
    	}
    		nav ul li:hover {
    			background: #4b545f;
    			background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    		}
    			nav ul li:hover a {
    				color: #fff;
    			}
    		
    		nav ul li a {
    			display: block; padding: 25px 40px;
    			color: #757575; text-decoration: none;
    		}
    			
    		
    	nav ul ul {
    		background: #5f6975; border-radius: 0px; padding: 0;
    		position: absolute; top: 100%;
    	}
    		nav ul ul li {
    			float: none; 
    			border-top: 1px solid #6b727c;
    			border-bottom: 1px solid #575f6a; position: relative;
    		}
    			nav ul ul li a {
    				padding: 15px 40px;
    				color: #fff;
    			}	
    				nav ul ul li a:hover {
    					background: #4b545f;
    				}
    		
    	nav ul ul ul {
    		position: absolute; left: 100%; top:0;
    	}
    		
    /* Page */
    
    #page {
    	padding: 30px 0px 0px 0px;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 620px;
    	padding: 0px 40px 0px 0px;
    	background: url(images/img05.jpg) no-repeat right 40px;
    	color: #2E2E2E;
    	font-family: helvectia, georgia;
    }
    
    .post {
    	overflow: hidden;
    }
    
    .post .title {
    	padding: 0px 0px 30px 0px;
    	letter-spacing: -3px;
    }
    
    .post .title  {
    	border: none;
    	color: #7D7764;
    }
    
    .post .meta {
    	margin-bottom: 30px;
    	padding: 0px;
    	text-align: left;
    	font-size: 16px;
    }
    
    .post .meta .date {
    	float: left;
    }
    
    .post .meta .posted {
    	float: right;
    }
    
    .post .meta a {
    }
    
    .post .entry {
    	padding: 0px 0px 20px 0px;
    	padding-bottom: 20px;
    	text-align: justify;
    }
    
    .links {
    	padding-top: 20px;
    	margin-bottom: 30px;
    }
    
    .more {
    	display: block;
    	float: left;
    	width: 88px;
    	height: 25px;
    	padding: 2px 0px 0px 0px;
    	margin-right: 10px;
    	background: url(images/img08.jpg) no-repeat left top;
    	text-align: center;
    	color: #FFFFFF;
    }
    
    .comments {
    	display: block;
    	float: left;
    	width: 88px;
    	height: 25px;
    	padding: 2px 0px 0px 0px;
    	background: url(images/img08.jpg) no-repeat left top;
    	text-align: center;
    	color: #FFFFFF;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 320px;
    	margin: 0px;
    	padding: 0px 0px 0px 0px;
    	color: #787878;
    }
    
    #sidebar h2 {
    	padding: 0px 0px 30px 0px;
    	letter-spacing: -3px;
    }
    
    #sidebar a {
    	border: none;
    }
    
    #sidebar a:hover {
    	text-decoration: underline;
    }
    
    /* Calendar */
    
    #calendar {
    }
    
    #calendar_wrap {
    	padding: 20px;
    }
    
    #calendar table {
    	width: 100%;
    }
    
    #calendar tbody td {
    	text-align: center;
    }
    
    #calendar #next {
    	text-align: right;
    }
    
    /* Three Column Footer Content */
    
    #footer-content {
    	background: url(images/img04.png) no-repeat center top;
    	color: #E2B8C6;
    }
    
    #footer-bg {
    	overflow: hidden;
    	padding: 70px 0px;
    }
    
    #footer-content h2 {
    	margin: 0px;
    	padding: 0px 0px 20px 0px;
    	letter-spacing: -2px;
    	text-shadow: 1px 2px 0px #861F40;
    	font-size: 36px;
    	color: #FFFFFF;
    }
    
    #column1 {
    	float: left;
    	width: 300px;
    	margin-right: 20px;
    }
    
    #column2 {
    	float: left;
    	width: 320px;
    }
    
    #column3 {
    	float: right;
    	width: 320px;
    }
    
    /* Footer */
    
    #footer {
    	height: 100px;
    	margin: 0 auto;
    	padding: 50px 0px 0px 0px;
    	background: url(images/img04.png) no-repeat center top;
    }
    
    #footer p {
    	margin: 0;
    	padding-top: 10px;
    	line-height: normal;
    	text-align: center;
    	color: #C76485;
    }
    
    #footer a {
    	color: #C76485;
    }
    
    #marketing {
    	overflow: hidden;
    	margin-bottom: 30px;
    	padding: 20px 0px 10px 0px;
    	border-top: 1px solid #E3E3E3;
    	border-bottom: 1px solid #E3E3E3;
    }
    
    #marketing .text1 {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	letter-spacing: -2px;
    	text-transform: lowercase;
    	font-size: 34px;
    	color: #345E9B;
    }
    
    #marketing .text2 {
    	float: right;
    }
    
    #marketing .text2 a {
    	display: block;
    	width: 252px;
    	height: 38px;
    	padding: 15px 0px 0px 0px;
    	background: url(images/img07.jpg) no-repeat left top;
    	letter-spacing: -2px;
    	text-align: center;
    	text-transform: lowercase;
    	font-size: 30px;
    	color: #FFFFFF;
    }
    
    .box1 {
    	overflow: hidden;
    	height: 300px;
    	background: url(images/img04.jpg) no-repeat center bottom;
    }
    
    .list-style1 {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    .list-style1 li {
    	padding: 7px 0px 7px 0px;
    	border-top: 1px dashed #E7E2DC;
    }
    
    .list-style1 .first {
    	padding-top: 0px;
    	border-top: none;
    }
    
    
    .list-style2 {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    .list-style2 li {
    	padding: 7px 0px 7px 0px;
    	background: url(images/img06.png) repeat-x left top;
    }
    
    .list-style2 a {
    	color: #E2B8C6;
    }
    
    .list-style2 a:hover {
    	color: #C76485;
    }
    
    .list-style2 .first {
    	padding-top: 0px;
    	background: none;
    }
    
    /* TREYTONS CODE */
    
    img.floatLeft { 
        float: left; 
        margin: 4px; 
    }

  2. #2
    Join Date
    Aug 2013
    Posts
    6
    Works fine in jsfiddle. http://jsfiddle.net/Nckne/

    Possible for a screen shot?

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,212
    Might help:

    Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/

    The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/...dropdown-menu/

    Nav Menus (See following sites for navigation menus):

    Responsive Navigation Patterns: http://bradfrostweb.com/blog/web/res...-nav-patterns/
    Responsive Menu Concepts: http://css-tricks.com/responsive-menu-concepts/
    Code a Responsive Navigation Menu: http://designshack.net/articles/css/...vigation-menu/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles