I am attempting to position my navigation menu on top of the content. Despite using z-index and overflow = visible, the desired effect is not achieved. I want to avoid setting the position relative as it will push the content downwards. Simply put, I want the menu to overlap the content. Below is the code. Appreciate your help.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="tabApp" >
<nav>
<ul> <span>The app</span>
<li class="sub">
<a href="shop.html">Version</a>
<ul>
<li class="sub">
<a href="#">V2</a>
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s">{{v2}}</li>
<li><a href="one.html">One</a></li>
</ul>
</li>
<li class="sub">
<a href="#">V3</a>
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s">{{v3}}</li>
<li><a href="one.html">One</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:alert('What are you talking about?');">About</a></li>
</ul>
</nav>
<article class="tabs">
<section id="home">
<h2><a href="#home">Home</a></h2>
<p>This content appears on tab Home.</p>
</section>
<section id="table">
<h2><a href="#table">table</a></h2>
<p>This content appears on tab tab.</p>
</section>
<section id="col">
<h2><a href="#col">Columns</a></h2>
<p>This content appears on tab Columns.</p>
</section>
</article>
<aside align="left">
aside of content
</aside>
<footer align="bottom">
<span>"Copyright© 2016</span></span>
</footer>
<script>
var app = angular.module('tabApp', []);
app.controller('V2Ctrl', function($scope) {
$scope.V2s = [' 10',' 11',' 12',' 13',' 14',' 15',' 16',' 17',' 18',' 19',' 20',' 21',' 22',' 23',' 24',' 25',' 26',' 27',' 28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
and the CSS
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
text-align: right;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
article.tabs
{
position: relative;
display: block;
width: 1200px;
height: 500px;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1200px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
The code has been added to jsfiddle for reference.
https://jsfiddle.net/3nkf8ken/1/