Jump to content

sub-menu CSS & HTML trouble


Recommended Posts

Hello W3S, it's been a while. Now i need help once again x).


Well i'm currently trying to make a sub-menu to my website, however not working for some reason and would like to know if anyone in here can spot the error in the CSS/HTML if possible since i have no clue regarding where the error is, i have almost tried everything that i am aware off and still no results :/.


Hoping you can help me somehow.


This is my HTML file as a start:

<?php/*THIS PROJECT USES 960GRID SYSTEM!*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.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><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><script type="text/javascript" src="js/jquery.js"></script><!--<script type="text/javascript" src="js/smoothmenu.js"></script><script type="text/javascript">ddsmoothmenu.init({	mainmenuid: "navigation",	orientation: "h",	classname: "navigation",	contentsource: "markup"});</script>--><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'>";				// Banner AND Logo		echo "<div class='ten columns half-bottom home_banner'>";			echo "Banner/Logo";		echo "</div>"; // Banner AND Logo				// LinkedIN Login		echo "<div class='five columns half-bottom userlogin_top'>";			echo "<a href='#'>Bruger Login</a>";		echo "</div>"; // LinkedIN Login				// Menu		echo "<div class='sixteen columns half-bottom navigation'>";			echo "<ul>";				// Subject 1				echo "<li><a href='index.php'>Subject 1</a>";					echo "<ul class='nav_sub_two'>";						echo "<li><a href='#'>Subject 1.1</a></li>";						echo "<li><a href='#'>Subject 1.2</a></li>";						echo "<li><a href='#'>Subject 1.3</a></li>";					echo "</ul>";				echo "</li>";								// Subject 2				echo "<li><a href='#'>Subject 2</a>";					echo "<ul class='nav_sub_two'>";						echo "<li><a href='#'>Subject 2.1</a></li>";						echo "<li><a href='#'>Subject 2.2</a></li>";						echo "<li><a href='#'>Subject 2.3</a></li>";					echo "</ul>";				echo "</li>";								// Subject 3				echo "<li><a href='#'>Subject 3</a>";					echo "<ul class='nav_sub_two'>";						echo "<li><a href='#'>Subject 3.1</a></li>";						echo "<li><a href='#'>Subject 3.2</a></li>";						echo "<li><a href='#'>Subject 3.3</a></li>";					echo "</ul>";				echo "</li>";			echo "</ul>";		echo "</div>";				/*		echo "<div class='sixteen columns half-bottom navigation'>";			echo "<ul>";				// Forside				echo "<li><a href='index.php'>Forside</a></li>";								// Job Søgere				echo "<li><a href='#'>For Jobsøgere</a>";					echo "<ul class='sub-menu'>";						echo "<li><a href='#'>Uopfordret ansøgning</a></li>";						echo "<li><a href='#'>Emnebank</a></li>";					echo "</ul>";				echo "</li>";								// For Virksomheder				echo "<li><a href='#'>For Virksomheder</a>";					echo "<ul class='sub-menu'>";						echo "<li><a href='#'>Processen for jer</a></li>";						echo "<li><a href='#'>Rekruttering og udvælgse</a></li>";						echo "<li><a href='#'>Headhunnting</a></li>";						echo "<li><a href='#'>Personlighedstest</a></li>";						echo "<li><a href='#'>Referencer</a></li>";					echo "</ul>";				echo "</li>";								// Ledige Stillinger				echo "<li><a href='#'>Ledige Stillinger</a>";					echo "<ul class='sub-menu'>";						echo "<li><a href='#'>Processen for dig</a></li>";					echo "</ul>";				echo "</li>";								// Kontakt				echo "<li><a href='#'>Kontakt</a>";					echo "<ul class='sub-menu'>";						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>"; // Menu		*/	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='#'>Admin Login</a>";		echo "</div>";	echo "</div>";	echo "</div>";?></body></html>

This is my CSS file:

body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; }	.userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*--------------------------------*//* NAVIGATION - MAIN              *//*--------------------------------*/.navigation {	clear: both;	height: 40px;	background-color: #F2F2F2;	-webkit-border-radius: 0 0 8px 8px;	-moz-border-radius: 0 0 8px 8px;	border-radius: 0 0 8px 8px;}	.navigation > ul > li {		position: relative;		float: left;	}		.navigation > ul > li > a {		display: block;		padding: 0 20px;		color: #2A2B2B;		text-transform: uppercase;		font-size: 1.083em;		font-family: "Oswald";		line-height: 40px;	}		.navigation > ul li a.child {padding-right: 33px;}			.navigation > ul > li:hover > a,	.navigation > ul > li.active > a {		-webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);		-moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);		box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);		background-color: rgba(0,0,0,.09);	}		.navigation li:hover:first-child a,		.navigation li.active:first-child a  {			-webkit-border-radius: 0 0 0 7px;			-moz-border-radius:0 0 0 7px;			border-radius:0 0 0 7px;		}			/*	.ie7 .navigation li:hover a,	.ie7 .navigation li.active a,	.ie8 .navigation li:hover a,	.ie8 .navigation li.active a { background: url(images/navigation/mask.png) repeat; }	*//*--------------------------------*//* NAVIGATION - SUBMENU           *//*--------------------------------*/.navigation ul li ul {	position: absolute;	left: 0;	z-index: 9999;	display: none;	visibility: hidden;	padding: 10px 0 0 0;	height: auto;}.navigation ul.nav_sub_two li ul {padding: 0 0 0 10px !important;}.navigation ul li ul li {width: 144px;}.navigation ul.nav_sub_two li:first-child {	-webkit-border-radius: 8px 8px 0 0;	-moz-border-radius: 8px 8px 0 0;	border-radius: 8px 8px 0 0;	border-top: none;}.navigation ul.nav_sub_two li:last-child {	-webkit-border-radius: 0 0 8px 8px;	-moz-border-radius: 0 0 8px 8px;	border-radius: 0 0 8px 8px;}.navigation ul.nav_sub_two li {	position: relative;	padding: .5em 0;	border-top: 1px dashed #3A3A3A;	padding-left: 8px;	background-color: rgba(0,0,0,.9);}/*.ie7 .navigation ul.sub-menu li,.ie8 .navigation ul.sub-menu li {	background-color: #000;}*/.navigation ul li ul li a:after {	position: absolute;	left: 4px;	top: 7px;	display: block;	width: 16px;	height: 16px;	background: url(images/navigation/bg-nav.png) no-repeat left bottom;	content: '';}.navigation ul li ul li a { padding-left: 28px; color: #FEFEFE; }.navigation ul.nav_sub_two li:hover > a { color: #F15B19 !important; }	/*#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) {	.userlogin_top { height: 70px; }		.userlogin_top a { margin-left: 70px; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {	.userlogin_top { height: 60px; }		.userlogin_top a { margin-left: 170px; line-height: 60px; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {	.userlogin_top { height: 50px; }		.userlogin_top a { margin-left: 110px; line-height: 50px; }}

I am currently using "getskelleton" framework for my website, would help alot if anyone in here could help me out somehow :D


Thanks in advance! xD

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...