I can't quite figure out why my drop down menu is hidden behind the div which contains the menu. I've tried positioning various elements relative and z-indexing the menu to a higher value than the div it's contained in but I've not had much luck.
My JS Fiddle link is here:
https://jsfiddle.net/Lj919ca6/
And the code for demonstrative purposes is here:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<title>Header 1</title>
</head>
<body>
<header id="header">
<div id="action-bar">
<div class="container">
<div>
<p class="ab-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul class="ab-ul top-bar-links">
<li>We Can Help</li>
<li>Something Random</li>
<li>More Random</li>
</ul>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div>
<img class="logo" src="logo.png">
</div>
<div class="main-nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<img src="gentleman.jpg" />
</body>
</html>
CSS:
body{
margin:0;
}
p{
font-family: 'Abel', sans-serif;
-webkit-margin-before: 2px;
-webkit-margin-after: 2px;
}
a{
font-family: 'Abel', sans-serif;
}
li{
font-family: 'Abel', sans-serif;
}
ul{
list-style: none outside;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
ul li{
color:white;
display: inline-block;
margin-right: 6px;
padding-right: 6px;
border-right: 1px solid rgba(255,255,255,.1);
}
#header{
position: relative;
}
#action-bar{
left: 0;
top: 0;
width: 100%;
z-index: 30;
background: #242b33;
height:45px;
}
.container{
max-width: 1220px;
margin:0 auto;
position:relative;
overflow: hidden;
}
.ab-p{
color:#fff;
float:left;
padding:10px;
}
.top-bar-links{
float: right;
padding:10px;
}
.main-header{
position: static;
width: 100%;
background-color: #0c141d;
display:block;
overflow:auto;
}
.logo{
float: left;
width:300px;
height:auto;
}
.main-nav{
float:right;
}
#primary_nav_wrap ul
{
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
z-index: 201;
}
#primary_nav_wrap 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
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Any help appreciated greatly.
.container had overflow set to hidden that seems to be the culprit.
You have given two elements with overflow properties.
.container and #header, remove overflow and add the following css to main-header
min-height:200px; // depending on what you want the height to be.
Here is the code pen link : http://codepen.io/saa93/pen/qqdRZy
Related
I have tried my best to do it myself, but I haven't succeeded. I want the categories (archive, topic etc.) to be able to disappear on my phone when i'm clicking on it the second time. So basically when I click on "Archive" etc. I want it to close again after opening it when I click on it. How do I do that?
My codes:
#primary_nav_wrap
{
margin-top:0;
width: 100%;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:2.5% 0 0 0;
}
#primary_nav_wrap ul a
{
display:block;
color:#5e5e5e;
text-decoration:none;
font-size:70%;
line-height:32px;
padding:5px 15px;
font-family:'Source Sans Pro', sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#FFF;
}
#primary_nav_wrap ul li:hover
{
background:none;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin:0;
border: 1px solid #eaeaea;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
letter-spacing: 1px !important;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Topic</li>
<li>Archive
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
Apparently, when I go down the list in the menu from the left side, the text becomes black and the background darkens however when i do it from the right, the text is still white. Also, when I resize the page and make it smaller, the words in the header of the menu converge with each other. I want the page to remain static when the window is resized like as in http://www.nfl.com when it's resized.
Here's my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
With your fiddle, you did not center the li elements which would not stretch the a elements to full width. You need to change this CSS selector:
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:100%;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
This will stop the cutoff on the a tags. This also centers the list elements, which may not be desired, but you may build off and customize. Another thing, the dropdown will not conform to the parent unless you add this:
#navMenu ul li ul {
width: 100%;
}
Finally, to prevent tab converging, set the min-width attribute on the tabs. This is an arbitrary number and you may change to your liking. A side note, since min-width overrides width, this will affect the dropdown. You may want to omit this:
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
min-width: 500px;
}
I've included a snippet with the JSFiddle code edited:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
//width:150px;
width: 100%;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu ul li ul {
width: 100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color: #000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
<title>My Webpage</title>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
So yea, the menu bar won't extend 100% horizontally. It's only going half the way on my computer screen. Also, I want it to fit any screen 100%, so when I decrease the screen width, I want it to adjust properly, not just get all messy looking. Also, any advice on the coloring would be appreciated. Thanks so much for any help you bring forth.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
}
#navMenu ul li a {
text-align:center;
font-famil:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
background:#265a4a;
color: #000000;
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
A little bit of math can be done.
I noticed that if I set the width of each main li in the nav to 100%, it would leave each to fit 100% of the viewport. However they would all be stacked upon one another like this:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #00aeef;
width:100%;
}
#navMenu ul li a {
text-align:center;
font-famil:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #0076a3;
}
#navMenu ul li:hover ul li a:hover {
background:#0076a3;
color: #fff;
}
#navMenu a:hover {
color:#fff;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
So what I did was find out how many "Product" links you had and get that divided into 100%. In other words: 100% divided by how many "Product links". You have 5, so I set the width of each li to 20%
Here's your code: http://jsfiddle.net/DVJmS/40/
I'm making a wordpress theme and I have some problems with the menu codification. My menu has sub-menus but they are displaying in the wrong way, And I don't know what to do to make them look like a Drop-Down menu. Here's the link to my site.
Would you mind giving me a CSS code (only) for a really simple dropdown menu? In my website, the menu with sub-categories is 'TV Shows' and the Subcategories are 'Pretty Little Liars', 'Resurrection', and 'Chasing Life'. I need a CSS to make them drop-down from 'Tv Shows'.
This is my CSS Code for the links
#menu {
height:55px;
background-color: #000;
width:100%;
top:0px;
left:0px;
z-index:101;
text-align:center;
text-transform:uppercase;
position:relative;
}
.menulinks {
float:right;
}
#menucontainer {
margin: 0 auto;
width:900px;
font-family: 'Open Sans', sans-serif;
}
#menucontainer a {
color:#fff;
}
#menucontainer a:hover {
color:#fff;
}
#menucontainer ul {
list-style: none;
padding:7px;
color:#A4A4A4;
}
#menucontainer ul a {
color:#848484;
}
#menucontainer li a {
color:#848484;
}
#menucontainer li {
display: inline;
margin-right:3px;
margin-left:3px;
padding:3px;
color:#848484;
}
Try This. fiddle here
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border: 1px solid;
}
ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
}
ul li:hover {
background: #262222;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #262222;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #a1a1a1;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>Home</li>
<li>Menu1</li>
<li>Menu2
<ul>
<li>Sub Menu</li>
<li>Another Sub Menu</li>
<li>And Anthor Sub Menu</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
The answer is more than just CSS. You have to make sure the HTMl is built to accept both. You have to have a ul tag within a ul tag to cause the secondary drop down.
Here is a codepen link for exactly what your looking for I think:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</nav>
Good luck!
I am a dropdown menu noob, and I can't seem to figure out how to keep my dropdown menu from blowing out and moving the main buttons. I'm sure its some kind of positioning adjustment, but I can't figure out where and what it is. Here is the jfiddle link: http://jsfiddle.net/F4WvT/
Here is the html:
<div id="global-nav">
<ul>
<li>HOME
</li>
<li>ABOUT
<div id="global-subnav">
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
<li>Sub Category 4</li>
<li>Sub Category 5</li>
<li>Sub Category 6</li> </ul>
</div>
</li>
<li>CONTENT
<div id="global-subnav">
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
<li>Sub Category 4</li>
<li>Sub Category 5</li>
<li>Sub Category 6</li> </ul>
</div>
</li>
<li>CONTACT
</li>
</ul>
</div>
And the CSS:
<style type="text/css">
#global-nav {
width: 180px;
height: 40px;
background-image: none;
float: left;
position: static;
margin-left:0px;
}
#global-nav a {
color:#000;
font-size:12px;
cursor:pointer;
display:block;
width: 200px;
height: 40px;
text-align:center;
vertical-align: central;
text-decoration:none;
font-weight:bold;
}
#global-nav ul {
background: whitesmoke;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: #D3171A;
position: relative;
width: 250px;
text-align:center;
left: 180px;
top: -55px;
}
#global-nav li {
list-style: none;
border-bottom: none;
border-width: 0px;
}
#global-nav ul ul li {
display:none;
}
#global-nav li:hover {
background: none;
}
#global-nav li:hover ul li {
display:block;
}
</style>
How do I get this my main nav buttons to stay still? Good karma for quick advice!
#global-subnav ul {
background: #D3171A;
position: relative;
width: 250px;
text-align: center;
left: 0px;
top: 0;
}
You need to make your sub navigation positioned absolute to it's relative parent, which in your case has to be the <li> element. Setting a top: 0 of your sub navigation element, will position it at the top of its parent, which is exactly what you want.
Edited example of your code: this JSFiddle