rootKID Posted November 28, 2014 Share Posted November 28, 2014 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 Thanks in advance! 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