Submenu size in navigation bar using HTML and CSS - javascript

I am trying to create a website, but i'm having a strange problem wiht my submenu in nav bar as you can see in this picture:
submenu problem
What I want is that my submenus elements have the same size, so I mean the same height.
This is my HTML part:
<header>
<div class="menu_bar">
<span class="icon-menu"></span>Menu
</div>
<div class="logo">
<img src="logo.png">
</div>
<div class="box">
<form>
<input type="text" name="" placeholder="Type...">
<input type="submit" name="" value="Search">
</form>
</div>
<nav>
<ul>
<li><span class="icon-home"></span>Acceuil</li>
<li><span class="icon-briefcase"></span>Cities</li>
<li class="tete">
<span class="icon-rocket"></span>Activites<span class="flash icon-circle-down"
<ul class="sousmenu">
<li>Venice</li>
<li>Rome</li>
<li>Pisa</li>
</ul>
</li>
<li><span class="icon-earth"></span>Services</li>
<li><span class="icon-envelop"></span>Contacter</li>
</ul>
</nav>
</header>
And this is CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}
body {
line-height: 1;
overflow-x:hidden;}
ol, ul {
list-style: none;}
blockquote, q {
quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;}
table {
border-collapse: collapse;
border-spacing: 0;}
.menu_bar {
display:none;}
header {
width: 100%;}
header nav {
background:rgba(255, 0, 0, 0.2);
z-index:1000;
max-width: 1400px;
width:100%;
margin-top: 0px; }
header nav ul {
list-style:none;
margin-left: 220px;}
.logo{
float: left;
padding-top:8px;
padding-left: 20px;
cursor: pointer;}
.box{
position: absolute;
top: 4.5%;
left: 95%;
width: 700px;
transform: translate(-50%, -50%); }
input{
position:relative;
display: inline-block;
font-size: 20px;
box-sizing: border-box;
transition: 0.5s}
input[type="text"]
{
background: #fff;
opacity:0.2;
width: 270px;
height: 30px;
border: none;
outline: none;
padding: 0 25px;
border-radius: 25px 0 0 25px; }
input[type="submit"]
{
position: relative;
border-radius: 0px 25px 25px 0;
width: 120px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
background: #ffc107;
opacity: 0.8;
}
input[type="submit"]:hover
{
background: #ff5722;}
header nav ul li {
display:inline-block;
position: relative;}
header nav ul li:hover {
background:red;}
header nav ul li a {
color:#fff;
display:block;
text-decoration:none;
padding: 20px;}
header nav ul li a span {
margin-right:10px;}
header nav ul li:hover .sousmenu {
display:block;}
header nav ul li .sousmenu {
display: none;
background:rgba(255, 0, 0, 0.2);
margin-left: 0px;
margin-top: 0px;
position: absolute;
width: 150%;
z-index:1000;}
header nav ul li .sousmenu li {
padding: 0px;
display:block;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.5); }
header nav ul li .sousmenu li a {
padding: 10px;
display: block;}
/*header nav ul li .sousmenu li a span {
float: right;
position: relative;
top:3px;
margin-right:0;
margin-left:10px;
}*/
header nav ul li .flash {
position: relative;
top:1px;
margin-left:10px;
margin-right:0px;}
#media screen and (max-width: 800px) {
body {
padding-top:80px;
}
.menu_bar {
display:block;
width:100%;
position: fixed;
top:0;
background:#E6344A;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav {
width: 80%;
height: calc(100% - 80px);
position: fixed;
right:100%;
margin: 0;
overflow: scroll;
}
header nav ul{
margin-left: 0px;
}
header nav ul li {
display: block;
border-bottom:1px solid rgba(255,255,255,.5);
}
header nav ul li a {
display: block;
}
sheader nav ul li:hover .sousmenu {
display: none;
}
header nav ul li .sousmenu {
width: 100%;
padding-top: 0px;
position: relative;
}
header nav ul li .sousmenu li a {
margin-left:20px;
}
header nav ul li .flash {
float: right;
}
.logo
{
display: none;
}
.box input
{
display: none;
}
}
This is JS part:
$(document).ready(main);
var contador = 1;
function main(){
$('.menu_bar').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
// Mostramos y ocultamos submenus
$('.tete').click(function(){
$(this).children('.sousmenu').slideToggle();
});
}


I'm not see your all code but you can try something like this to play with your li or ul
header nav ul {
position: absolute;
top: 10%;
}
Or
header nav ul li {
position: absolute;
top: 10%;
}


You just forget to close a ">" the correct code:
<header>
<div class="menu_bar">
<span class="icon-menu"></span>Menu
</div>
<div class="logo">
<img src="logo.png">
</div>
<div class="box">
<form>
<input type="text" name="" placeholder="Type...">
<input type="submit" name="" value="Search">
</form>
</div>
<nav>
<ul>
<li><span class="icon-home"></span>Acceuil</li>
<li><span class="icon-briefcase"></span>Cities</li>
<li class="tete">
<span class="icon-rocket"></span>Activites<span class="flash icon-circle-down"></span>
<ul class="sousmenu">
<li>Venice</li>
<li>Rome</li>
<li>Pisa</li>
</ul>
</li>
<li><span class="icon-earth"></span>Services</li>
<li><span class="icon-envelop"></span>Contacter</li>
</ul>
</nav>
</header>

Related

Dropdown menu box size

I have a question about the dropdown menu size. If the title in the dropdown is long, it moves to the bottom line. I want it to increase the width of the Dropdown menu size. How can I do that. Below you can find the photo of the dropdown menu and the corresponding codes.Thanks for your answers.
Dropdown Menu
HTML
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Drop-down Menu Bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
CodingNepal</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Web Design and some information</li>
<li>App Design</li>
<li>
<label for="btn-3" class="show">More +</label>
More <span class="fa fa-plus"></span>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<header>Responsive Drop-down Menu Bar</header>
<p>
HTML and CSS (Media Query)</p>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #f2f2f2;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 10px #66ffff;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: cyan;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header{
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p{
font-size: 30px;
font-weight: 500;
}

Put those two styles on your code. the reason for your issue is not specify the width of inner list.
nav ul li ul {
width: fit-content;
}
nav ul li ul li {
width: 100%;
display: block;
}
in your stylesheet there is some bad practices without defining any class names for your styles. it is hard to find when add more styles. you can use ids or classes and tones of ways to make it easy.

New to HTML and CSS: Drop down menu not displaying

Hello I am creating a website navigation menu. I have implemented a drop down option to one of my links but it is not displaying at all. I am sure this is a simple fix that I am overlooking, any help is appreciated.
I have only included relevant HTML and CSS code. Thanks!
HTML:
<nav onmouseout="hide()">
<ul id="navMenu">
<li>Home</li>
<li><span onmouseover="show(about)">About Us</span>
<div id="about" onmouseover="show(about)" style="visibilty:hidden;">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
visibility: hidden;
}
#navMenu div a {
display: block;
width: 500px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu div:hover {
display: block;
background-color: #7e8182;
}

You can do this using CSS, no need to use javaScript. Check updated snippet below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
display: none;
background-color: #7e8182;
}
#navMenu div a {
display: block;
width: 200px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu li:hover div{
display: block;
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><span>About Us</span>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>

No need if JS, just pure CSS. Hope this helps ;)
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul div
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul div li
{
float:none;
width:200px
}
nav ul div a
{
line-height:120%;
padding:10px 15px
}
nav ul li:hover > div
{
display:block
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><a>About Us</a>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>

Show sublinks in mobile view

I have different sublinks in my navigation bar. I'd like to collapse the navigation bar in mobile view (got that already) but it doesn't display all links
HTML
<nav class= "clearfix">
<ul class="clearfix navigation">
<li>
Bewerbung
<ul class="sub-menu" id="push">
<li>Motivation</li>
<li>Lebenslauf</li>
<li>Downloads</li>
</ul>
</li>
<li>
home
<ul class="sub-menu" id="push">
<li>Kontakt</li>
</ul>
</li>
<li>
Projekte
<ul class="sub-menu" id="push">
<li>Photographie</li>
<li>3D Animation</li>
</ul>
</li>
</ul>
Menu
</nav>
CSS
nav a {
transition:all linear 0.15s;
color: #fff;
display: table;
width: 250px;
text-align: center;
text-decoration: none;
line-height: 50px;
}
nav a:hover, nav a:active {
background-color: #ffffff;
color: #1D424A;
}
nav a#pull {
display: none;
}
nav a#mobile {
display: none;
}
.sub-menu{
display:none;
}
nav li:hover .sub-menu {
display: inline-block;
z-index:1;
opacity:1;
}
.sub-menu {
width:250px;
padding:0px 0px;
position: absolute;
top:100%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#1D424A;
}
.sub-menu li {
display:block;
font-size:16px;
color: #363636;
}
.sub-menu li a {
padding:0px 0px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
CSS in mobile view
nav {
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #6A6A6A;
width: 100%;
position: relative;
margin-top: 0px;
color: #ffffff;
}
nav a#pull:after {
content:"";
width: 30px;
height: 20px;
display: inline-block;
position: relative;
right: 15px;
top: 10px;
margin-top: 0px;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
margin-top: 0px;
}
.sub-menu{
display: block;
}
JAVASCRIPT
$(function() {
var pull = $('#pull'),
menu = $('nav ul'),
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
http://ti-sign.ch/navbar/

It's because of the fixed height of 50px on .navigation :
.navigation {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0 auto;
width: 750px;
height: 50px; /* remove that line and it works */
}

Dropdown always align center

I have to make dropdown always align center, according to the parent tag. Any help would be greatly appreciated.
The example is given below:
Fiddle Link: http://jsfiddle.net/abidkhanweb/ojxpt4m2/

You can do something like this:
#menu {
border-bottom: 1px solid #DDD;
color: #fff;
display: block;
float: right;
height: 18pt;
line-height: 18pt;
list-style-type: none;
text-transform: uppercase;
width: 100%;
font-size:14px;
position:absolute;
}
#menu > li{
background-color: #003399;
border: 1px solid #DDD;
margin-top:-1px;
float: right;
position: relative;
margin-left: 1%;
padding-left: 2%;
padding-right: 2%;
}
#menu li:hover {
opacity: 0.8;
}
#menu li .wrapper .submenu {
display: block;
margin-left: 50%;
width:100%;
}
#menu li .wrapper {
display: block;
position: absolute;
top: 19pt;
right: 50%; /*this will center the div*/
white-space: nowrap;
}
#menu li:hover .wrapper .submenu {
display: block;
}
.submenu li {
display: inline-block;
padding-left: 1.5%;
white-space: nowrap;
opacity: 0.7;
}
.submenu li a {
padding-right: 3%;
padding-left: 3%;
background-color: #000;
display: inline-block;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
color:#C37000;
padding:1px 5px;
border-collapse:collapse;
font-weight:bold;
text-decoration:none;
margin:0;
}
.topmenu ul{
display:none;
}
.submenu a{
padding:1px 5px;
border:1px solid #C37000;
border-collapse:collapse;
color:#C37000;
font-weight:bold;
text-decoration:none;
background-color:#7F4800;
margin:0;
width:100%;
}
.submenu a:hover {
color:#4C4C4C;
background-color:#ffddbb !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
<ul id="menu">
<li class="topmenu">Menu 1</li>
<li class="topmenu">Menu 2
</li>
<li class="topmenu">Policies
<div class="wrapper">
<ul >
<li class="submenu"><a>Field 1</a></li>
<li class="submenu"><a>Field 2</a></li>
<li class="submenu"><a>Field 3</a></li>
<li class="submenu"><a>Field 4</a></li>
</ul>
</div>
</li>
<li class="topmenu">Menu 4</li>
</ul>

I assume you have applied position: absolute to the dropdown, for you to position it to the left, set the left property to the value of your padding for the policies container like so:
nav {
background: orange;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
position: relative;
top: 0;
left: 0;
margin-left: 50px;
}
nav > ul > li > a {
display: inline-block;
color: white;
text-decoration: none;
padding: 5px 10px;
background: green;
}
nav > ul ul {
background: #eee;
border: 1px solid #000;
padding: 10px;
position: absolute;
left: -10px;
}
<nav>
<ul>
<li>Policies
<ul>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
</ul>
</li>
</ul>
</nav>

Div pushing sibling Div's contents

I have 2 divs nested in the body (a) and (b). Div (b) has a negative top margin so it sits on top of div (a).
Everything's fine except the content's of div (b) are stuck a the bottom, below div (a) as it would appear the css properties of their parent have not affected them.
Here's the html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<script src="js/jquery-1.9.1.min.js"></script>
<link href="css/carousel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-menu">
<div class="container">
<div class="logo"><img src="img/logo.png" alt="logo"></div>
<ul class="nav">
<li>who we are</li>
<li>what we do</li>
</ul>
<input type="text" placeholder="login/register" class="header-login">
<button type="submit" class="header-btn"></button>
<span class="za"><img src="img/south-africa.png"></span>
<span class="sng"><img src="img/singapore.png"></span>
</div>
</div>
<div class="carousel-main">
<div id="myCarousel" class="carousel slide">
<div class="container">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
<div class="carousel-inner home-carousel">
<div class="item active">
<img src="img/1.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Risk Management and<br>
Business Finance made simple. </h3>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Manage my company.</h3>
</div>
</div>
</div>
<div class="item">
<img src="img/3.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Investing my money.</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-menu">
<ul>
<li>finance</li>
<li>Manage</li>
<li>invest</li>
</ul>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 9000
});
$('#myCarousel').carousel('pause');
});
</script>
</body>
</html>
Here's the style.css
#charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);
html, body
{
width:100%;
height:100%;
font-family: 'Source Sans Pro', sans-serif !importantsa;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.top-menu
{
height:70px;
width:100%;
}
.logo
{
height:100%;
width:277px;
float:left;
}
.logo img
{
height:100%;
}
.container
{
width:960px;
margin:0 auto;
position:relative;
}
.top-menu .nav
{
float:left;
}
.top-menu ul li
{
display:inline-block;
padding:30px 10px;
text-transform:uppercase;
font-family: 'Source Sans Pro', sans-serif;
color:#808184;
}
.header-login
{
font-family: 'Source Sans Pro', sans-serif;
margin:25px;
padding-left:10px;
font-size:17px;
text-transform:uppercase;
background-color:#ededed;
border:none;
max-width:140px;
float:left;
}
.header-btn
{
height:30px;
width:30px;
background-image:url(../img/login.png);
background-color:transparent;
border:none;
margin-top:22px;
margin-left:-20px;
margin-right:30px;
float:left;
}
.top-menu span
{
margin-top:27px;
float:left;
margin-left:10px;
}
.sub-menu
{
width:100%;
height:170px;
margin-top:-280px;
background-color:rgba(247,148,30,0.6);
z-index:2;
}
.sub-menu ul
{
margin:0 auto;
width:600px;
height:100%;
}
.sub-menu ul li
{
display:inline-block;
height:200px;
width:190px;
text-transform:uppercase;
color:#fff;
}
Here's the carousel.css:
#charset "UTF-8";
/* CSS Document */
.carousel {
margin-bottom: 20px;
line-height: 1;
float:left;
z-index:-1;
}
.carousel-inner {
position: relative;
width: 100%;
height:700px;
overflow: hidden;
z-index:-1;
}
.carousel-inner > .item {
position: relative;
display: none;
overflow: hidden;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
height:100%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-indicators {
position: absolute;
top:600px;
right:0;
z-index: 5;
margin: 0 auto;
list-style: none;
}
.carousel-indicators li {
display: block;
float: left;
width: 20px;
height: 20px;
margin-left: 5px;
text-indent: -999px;
background-image:url(../img/indicator.png);
background-repeat:no-repeat;
opacity:0.6;
}
.carousel-indicators .active {
opacity:1;
}
.slider
{
height:700px;
width:800px;
margin: 0 auto;
margin-bottom:20px;
}
.slider img
{
width:100%;
}
.carousel-main
{
height:700px;
background-color: transparent;
margin: 0 auto;
width:100%;
}
.home-carousel > .item > img, .home-carousel > .item > a > img {
display: block;
line-height: 1;
min-height:100%;
width:100%;
max-height:100%;
}
.inner-carousel > .item > img, .inner-carousel > .item > a > img {
display: block;
line-height: 1;
height:350px;
width:800px;
}
.carousel-caption {
position: absolute;
top: -400px;
font-family: 'Source Sans Pro', sans-serif;
}
.carousel-caption h3 {
font-weight:900;
font-size:45px;
line-height:44px;
letter-spacing:-1px;
color:#fff;
text-shadow: rgba(0,0,0, 0.5) 1px 1px 2px;
}
.carousel-caption p {
font-weight:100;
font-size:18px;
line-height:38px;
margin-top:-30px;
}
.carousel-main #myCarousel
{
width:100%;
height:700px;
margin: 0 auto;
margin-bottom:-200px;
}
.carousel-control {
position: absolute;
top: 400px;
left: 0px;
width: 60px;
height: 60px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background-image:url(../img/leftarrow.png);
background-size:cover;
background-color:transparent;
border: 0px solid rgb(255, 255, 255);
border-radius: 100px;
opacity: 1;
filter: alpha(opacity=50);
transition: all 2s ease-in-out;
-webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
-moz-transition: all .6s ease-in-out; /** Firefox **/
-o-transition: all .6s ease-in-out;
}
.carousel-control.right {
right:0;
left: auto;
background-image:url(../img/rightarrow.png);
}
.carousel-control:hover {
color: rgb(255, 255, 255);
opacity:.6;
text-decoration: none;
}
.carousel-control:focus {
background-color:none;
text-decoration: none;
opacity: 0.9;
}
.home-carousel .carousel-caption h4 {
font-weight:500;
font-size:29px;
color:#F7F4ED;
line-height:35px;
margin: 20px 0 20px;
text-align:center;
}
.home-carousel .carousel-caption .introduction {
font-weight:300;
font-size:13px;
line-height:19px;
text-align:center;
margin:0 auto;
color:#F7F4ED;
height:200px;
width:250px;
}
#media (max-width: 1030px) {
.carousel-control {
position: absolute;
bottom:0;
left: 0px;
margin-top:225px;
width: 60px;
height: 60px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background-image:url(../img/leftarrow.png);
background-size:cover;
background-color:#474C71;
border: 0px solid rgb(255, 255, 255);
border-radius: 0px;
opacity: 1;
filter: alpha(opacity=50);
transition: all 2s ease-in-out;
-webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
-moz-transition: all .6s ease-in-out; /** Firefox **/
-o-transition: all .6s ease-in-out;
}
.carousel-control.right {
left: 61px;
background-image:url(../img/rightarrow.png);
}
}
Here's a working version of the same:
http://deeptest.co.za/apexpeak/
Please help and thank you

Your content is at the bottom because element with class name 'carousel' (this element with id='myCarousel') has set to:
float: left;
it is in carousel.css on line 3.

Margins (and thus, negative margins) are handled differently for floated and inline elements than they are for non-floated block-level elements.
If you want to use this method to position the sub-menu you will need to add
float: left;
to the sub-menu div and its siblings
so:
.carousel-main, top-menu, #myCarousel{
float: left;
}
or similar in the correct place in your existing CSS.

.sub-menu {
width: 100%;
height: 200px;
/*margin-top: -280px; - REMOVE THIS */
background-color: rgba(247, 148, 30, 0.4);
z-index: 2;
/* ADD THE FOLLOWING */
position: relative;
top: -280px;
}

Categories