Responsive design trouble/clickable menu

[rootKID]

i know, i fixed that part, sorry... told ya in the "EDIT" part i think. But i have another problem like i said in the "EDIT" part also, whenever my mouse goes over the jQuery, it dosent work... ideas Oo?

 

And also another thing now, i noticed i have an annoying space in the bottom of my mobile view design, here:

 

PICTURE:

And not sure what's happening, i tried switching my "#accordian" ID between 2 divs. Right now i have the ID with my main container, however when i add a div INSIDE the container div, the bottom disappears, which is kinda the point ^^

Any ideas on how to fix that part? Because if i add the div on the inside of the container, my main-screen menu will ###### up. Meaning whenever it drops down, the menu will not go over the other divs but simply pushing them down, and that is not supposed to happen.

 

Ideas?

 

This is my CSS atm:

/*# Navigation / Main==================================================*/#accordian {	height: 40px;	width: 100%;	background: #004050;	color: #FFFFFF;	margin-bottom: 0;}	/* ///////////////////////////////////// */	/* ////////// Heading Styles /////////// */	/* ///////////////////////////////////// */		/* heading styles */	#accordian h3 {		margin-bottom: 5px;		text-transform: uppercase;		font-size: 1.083em;		font-family: "Oswald";		line-height: 40px;		text-align: center;		cursor: pointer;		color: #FFFFFF;		/* fallback for browsers not supporting gradients */		background: #003040; 		background: linear-gradient(#003040, #002535);	}				/* heading styles - hover effect */		#accordian h3:hover {			text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);		}			/* heading link styles - for single menu link without drop */	#accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; }				/* heading link styles - hover effect */		#accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); }			/* ///////////////////////////////////// */	/* ///////////// List Items //////////// */	/* ///////////////////////////////////// */		/* list items */	#accordian li {		position: relative;		float: left;		width: 20%;		margin-bottom: 0;	}		#accordian ul li ul li { width: 100%; }	/*# Navigation / Sub-Menu==================================================*//* Lets hide the non active LIs by default */#accordian ul ul {	margin: 0;	display: none;}#accordian ul ul {	/*	position: relative;	left: 0;	right: 0;	padding: 10px 0 10px 0;	background-color: #333F4F;	*/}/* #accordian ul ul li { float: left; } *//*Showing the Sub-Menu when mouse-over(FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!)*/#accordian li:hover > ul { display: block; }/* links */#accordian ul ul li a {	color: #FFFFFF;	padding: 10px 15px 10px 15px;	background-color: #333F4F;	text-decoration: none;	font-size: 11px;	line-height: 27px;	display: block;	/* transition for smooth hover animation */	transition: all 0.15s;}/* hover effect on links */#accordian ul ul li a:hover {	background: #003545;	border-left: 5px solid #90EE90;}/*# Global Design==================================================*/body { margin-top: 10px; }div.top_block {margin: 0 !important;}div.banner { height: 150px; background: url(images/logo/pc.png) no-repeat top center #FFFFFF; }/*# Home/Forside==================================================*/.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {	div.banner { height: 138px; background: url(images/logo/tablet.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		#accordian { height: auto; }		/* list items */	#accordian li {		list-style-type: none;		float: none;		width: 100%;	}		/*	Showing the Sub-Menu when mouse-over	(FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!)	*/	#accordian li:hover > ul { display: none; }		/* links */	#accordian ul ul li a {		color: #FFF;		text-decoration: none;		font-size: 11px;		line-height: 27px;		display: block;		padding: 0 15px;		/*transition for smooth hover animation*/		transition: all 0.15s;	}		/* ///////////////////////////////////// */	/* ////////// Heading Styles /////////// */	/* ///////////////////////////////////// */		/* heading styles */	#accordian h3 {		text-transform: uppercase;		font-size: 12px;		font-family: "Oswald";		line-height: 34px;		text-align: center;		cursor: pointer;		color: #FFFFFF;		/* fallback for browsers not supporting gradients */		background: #003040; 		background: linear-gradient(#003040, #002535);	}				/* heading styles - hover effect */		#accordian h3:hover {			text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);		}			/* heading link styles - for single menu link without drop */	#accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; }				/* heading link styles - hover effect */		#accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); }			}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {	div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		#accordian { height: auto; }		/* list items */	#accordian li {		list-style-type: none;		float: none;		width: 100%;	}		/*	Showing the Sub-Menu when mouse-over	(FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!)	*/	#accordian li:hover > ul { display: none; }		/* links */	#accordian ul ul li a {		color: #FFF;		text-decoration: none;		font-size: 11px;		line-height: 27px;		display: block;		padding: 0 15px;		/*transition for smooth hover animation*/		transition: all 0.15s;	}		/* ///////////////////////////////////// */	/* ////////// Heading Styles /////////// */	/* ///////////////////////////////////// */		/* heading styles */	#accordian h3 {		text-transform: uppercase;		font-size: 12px;		font-family: "Oswald";		line-height: 34px;		text-align: center;		cursor: pointer;		color: #FFFFFF;		/* fallback for browsers not supporting gradients */		background: #003040; 		background: linear-gradient(#003040, #002535);	}				/* heading styles - hover effect */		#accordian h3:hover {			text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);		}			/* heading link styles - for single menu link without drop */	#accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; }				/* heading link styles - hover effect */		#accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); }			}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {	div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		#accordian { height: auto; }		/* list items */	#accordian li {		list-style-type: none;		float: none;		width: 100%;	}		/*	Showing the Sub-Menu when mouse-over	(FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!)	*/	#accordian li:hover > ul { display: none; }		/* links */	#accordian ul ul li a {		color: #FFF;		text-decoration: none;		font-size: 11px;		line-height: 27px;		display: block;		padding: 0 15px;		/*transition for smooth hover animation*/		transition: all 0.15s;	}		/* ///////////////////////////////////// */	/* ////////// Heading Styles /////////// */	/* ///////////////////////////////////// */		/* heading styles */	#accordian h3 {		text-transform: uppercase;		font-size: 12px;		font-family: "Oswald";		line-height: 34px;		text-align: center;		cursor: pointer;		color: #FFFFFF;		/* fallback for browsers not supporting gradients */		background: #003040; 		background: linear-gradient(#003040, #002535);	}				/* heading styles - hover effect */		#accordian h3:hover {			text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);		}			/* heading link styles - for single menu link without drop */	#accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; }				/* heading link styles - hover effect */		#accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); }			}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {	div.banner { height: 90px; background: url(images/logo/mobile_port.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		#accordian { height: auto; }		/* list items */	#accordian li {		list-style-type: none;		float: none;		width: 100%;	}		/*	Showing the Sub-Menu when mouse-over	(FIXED FOR ONLY CLICK AT MOBILE VIEW WITH "display: none;"!)	*/	#accordian li:hover > ul { display: none; }		/* links */	#accordian ul ul li a {		color: #FFF;		text-decoration: none;		font-size: 11px;		line-height: 27px;		display: block;		padding: 0 15px;		transition: all 0.15s;	}		/* ///////////////////////////////////// */	/* ////////// Heading Styles /////////// */	/* ///////////////////////////////////// */		/* heading styles */	#accordian h3 {		text-transform: uppercase;		font-size: 12px;		font-family: "Oswald";		line-height: 34px;		text-align: center;		cursor: pointer;		color: #FFFFFF;		/* fallback for browsers not supporting gradients */		background: #003040; 		background: linear-gradient(#003040, #002535);	}				/* heading styles - hover effect */		#accordian h3:hover {			text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);		}			/* heading link styles - for single menu link without drop */	#accordian h3 a { display: block; text-align: center; color: #FFFFFF; text-decoration: none; }				/* heading link styles - hover effect */		#accordian h3 a:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); }			}

This is my HTML:

<?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/# Database Settings & Setuprequire_once("database/db.core.php");ob_start();session_start();# Static Error Checkerrequire_once("includes/static.error.check.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><script type="text/javascript" src="http://platform.linkedin.com/in.js">	api_key: "h6YnI876FlO0VgdW"	authorize: true</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]>	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>";		// Sixteen Columns (Banner AND Logo, Userlogin, Menu)	echo "<div class='sixteen columns top_block'>";				// Banner AND Logo		echo "<div class='sixteen columns half-bottom banner'>";			echo "";		echo "</div>";				// NEW MENU		// ================================				echo "<div class='sixteen columns half-bottom' id='accordian'>";			echo "<ul>";								// Forside				echo "<li>";					//echo "<h3>Forside</h3>";					echo "<h3><a href='index.php'>Forside</a></h3>";				echo "</li>";								// Job Søgere				echo "<li>";					echo "<h3>For Jobsøgere</h3>";					echo "<ul>";						echo "<li><a href='#'>Uopfordret ansøgning</a></li>";						echo "<li><a href='#'>Emnebank</a></li>";					echo "</ul>";				echo "</li>";								// For Virksomheder				echo "<li>";					echo "<h3>For Virksomheder</h3>";					echo "<ul>";						echo "<li><a href='#'>Processen for jer</a></li>";						echo "<li><a href='#'>Rekruttering og udvælgse</a></li>";						echo "<li><a href='#'>Headhunting</a></li>";						echo "<li><a href='#'>Personlighedstest</a></li>";						echo "<li><a href='#'>Referencer</a></li>";					echo "</ul>";				echo "</li>";								// Ledige Stillinger				echo "<li>";					echo "<h3>Ledige Stillinger</h3>";					echo "<ul>";						echo "<li><a href='#'>Processen for dig</a></li>";					echo "</ul>";				echo "</li>";								// Kontakt				echo "<li>";					echo "<h3>Kontakt</h3>";					echo "<ul>";						echo "<li><a href='#'>Om RightMatch</a></li>";						echo "<li><a href='#'>Mission & Vision</a></li>";						echo "<li><a href='#'>Nyt og artikler</a></li>";					echo "</ul>";				echo "</li>";							echo "</ul>";		echo "</div>";			echo "</div>";		// Eight Columns (News Blog)	echo "<div class='eleven columns half-bottom home_news'>";		echo "Sidste Nyheder";	echo "</div>";		// Eight Columns (Something)	echo "<div class='five columns half-bottom home_feed'>";		echo "LinkedIN Feed";	echo "</div>";		// Sixteen Columns (Footer, Admin Login)	echo "<div class='sixteen columns'>";		echo "<div>";			echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>";		echo "</div>";		echo "<div>";			echo "<a href='acp/index.php'>Admin Login</a>";		echo "</div>";	echo "</div>";	echo "</div>";?><!-- =============================================== --><!-- ============ JavaScript Loaded Here============ --><!-- =============================================== --><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script></body></html>

Ideas?

[Ingolme]

This all seems like CSS problems.

 

First, press F12 to open your development tools. Use the DOM inspector to see where the extra margin or padding are coming from, then you can know where in the stylesheet to fix it.

 

If you want the menu to go over other elements instead of pushing them down set the position to absolute. The whole point of an accordion, though, is to separate menu items and put something in between. If you're changing the HTML structure of the menu you will need to update the jQuery selectors accordingly.

 

You cannot put the same ID on more than one element. If you want to do that, use a class name instead of an ID.

<div class="accordion">

And to select classes in jQuery: $(".accordion h3")

[rootKID]

i know that, i removed the id from the other div once i switched... i still dont understand why it wont allow me to fix the damn thing -.-'

 

If i do change the HTML setup, which im not out from what i can read from the default, only the css ^^... then what jQuery part should i change?

[Ingolme]

When you change the HTML, you need to change the jQuery selector so that it points to the elements you want to change.

 

Honestly, I haven't had a clear idea of what you really want to happen.

 

Attached is a menu that transforms from an ordinary horizontal menu into an accordion menu when the screen is resized.

test.html