I keep having this issue where my CSS dropdown menu is hiding behind my content on my page. I have looked around and tried using Z-Index in order to specify where it needs to go, and I cannot figure it out. All of my content is in the div class ".wrapper" which is what the navigation line is hiding behind. Here is the CSS:
nav {
margin: -75px 100px 20px 100px;
text-align: right;
position: relative;
z-index: 1000;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
z-index: 1000;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #D22525 0%, #5F1414 100%);
background: -moz-linear-gradient(top, #D22525 0%, #5F1414 100%);
background: -webkit-linear-gradient(top, #D22525 0%,#5F1414 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #FFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;z-index: 1000;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
z-index: 1000;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.wrapper
{
overflow: hidden;
padding: 0em 0em 5em 0em;
background: #FFF;
top: 150px;
position: absolute;
z-index: 0;
}
After that Here is my HTML:
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1></span>HHS E3</h1>
</div>
<nav>
<ul>
<li><img src="/media/home.png" height="14px" /></li>
<li><a>Media</a>
<ul>
<li>Videos</li>
<li>Pictures</li>
<li>Music</li>
</ul>
<li><a>Bullying</a>
<ul>
<li>Harrassment</li>
<li>Abuse</li>
<li>Mental Illness</li>
<li>Dissability</li>
<li>For Fun</li>
</ul>
</li>
<li><a>About E3</a>
<ul>
<li>Our Videos & Stories</li>
<li>Our Presentations</li>
</ul>
</li>
<li><a>About the Founders</a>
<ul>
<li>Raider Radio</li>
<li>Video</li>
<li>Info</li>
<?php
if(empty($_SESSION['logged_in']))
{
} else {
echo "<li><a href='#'>User</a><ul><li><a href='/upload'>Upload</a></li><li><a href='/logout.php'>Logout</a></li></ul></li>";
}
?>
</ul>
</nav>
</div>
</div>
</div>
<div class="wrapper">
<div id="three-column" class="container">
If anyone has any thoughts on what I need to fix, I would greatly appreciate it. Overall, the drop down menus work, but only the first row is displayed and the rest are hidden behind the wrapper. Do I maybe need to do anything to the id="three-column" or class="container" Thanks!
PS: jsfiddle
Here's a fiddle!
I did three things:
Removed the margin from the Nav (The margins + the background was covering your logo)
Added display: inline-block to both the Nav and #logo. This allowed them to display next to each other correctly.
Added float:left and float:right to the #logo and Nav respectively. Which would push them to the left and right.
nav{
text-align: right;
position: relative;
z-index: 1000;
float:right;
display: inline-block;
float: right;
}
#logo{
display: inline-block;
float: left;
}
Try this fiddle
I used your html and css and made the below changes:
Added position:relative to nav ul li
Changed top value to 70px in nav ul ul
Hope this helps you.
I would like to say thank you to everyone for starters. I have read every comment and answer on here. However, there was one thing I caught by putting essentially all of your answers together. I had forgotten to place the div id "header-wrapper" in my code shown above. In it, like one user had stated, it had Overflow: Hidden The nav was contained in there. After setting Overflow: Visible my issue has been resolved. Thank you again everyone.
Related
I am trying to get my dropdown menu to work, but for some reason, it doesn't appear in the browser.
I already checked the other questions and couldn't find a reason for my problem. I already removed overflow:hidden from my parent list, even though the gradient I had in the navbar disappeared because of that and I don't know how to fix that either.
I used w3school for help (although they didn't use a list, which is a requirement) and a template from one of my friends that I even copypasted into my css and it still didn't work.
Okay, so for your reference, here you have my CSS and HTML:
body {font-family: "Century Gothic", "Trebuchet MS";
width: 780px;
margin: auto;
background-color: #555555}
#site {background-color: white;
padding: 10px;}
/** My Friend's CSS that didn't work either
.main li {list-style-type: none;
float: left;
width: 150px;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
text-align: center;}
.main li:hover {color: white;}
.main2 li {display: none;
background-color: lightgrey;
color: black;}
.main2 li:hover {background-color: grey;
color: white;}
.main li:hover .main2 li {display: block;}**/
.main {list-style-type: none;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
width: 100%}
.main li {display: block;
float: left;
position: relative}
.main li a {display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;}
.main a {text-decoration: none;
color: black;}
.main2 li {position: absolute;
display: none;
width: 100%
}
.main li a:hover .main2 li {display: block;}
.main2 li a {color: black;
text-decoration: none;
display: block;}
<body>
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>Blog</li>
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
<li>Forum</li>
<li>Kontakt</li>
<li>Links</li>
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</ul>
</nav>
also, here's a screenshot of how the website looks like at the moment (I only included the important parts of the HTML because I actually haven't formatted the rest of the site in CSS
screenshot
Thank you so much for your help!
I assume you want the .main2 menu displayed only when parent link is covered.
2 changes:
1) make a child ul tag part of the li (nest it)
2) change the display logic of :hover to act on child element (.main li:hover > ul)
Result:
.main {
list-style-type: none;
background-image: linear-gradient( rgba(240,240,240,1), rgba(240,240,240,0) );
width: 100%;
display:flex;
}
.main li {
display: block;
float: left;
position: relative;
}
.main li a {
display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;
}
.main a {
text-decoration: none;
color: black;
}
.main2 {
width: 100%;
display:none;
position: absolute;
padding:0;
}
.main2 li {
width: 100%;
}
.main li:hover > ul {
display: block;
}
.main2 li a {
color: black;
text-decoration: none;
display: block;
}
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>Blog
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Forum</li>
<li>Kontakt</li>
<li>Links
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</nav>
If you are thinking about optimizing the styling, here is my version with less selectors:
https://codepen.io/VsevolodTS/pen/KRxeRL
Here is a solution, I commented the changed code.
The problem is that your <ul class="main2"> is in the same level as the other li which is not valid.
I olso changed this line of css
.main li a:hover .main2 li {display: block;}
to
.main li:hover .main2 li {display: block;}
Edit
For the gradient problem use display: inline-block; on main
body {font-family: "Century Gothic", "Trebuchet MS";
width: 780px;
margin: auto;
background-color: #555555}
#site {background-color: white;
padding: 10px;}
.main {list-style-type: none;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
display: inline-block; // <-- here
width: 100%}
.main li {display: block;
float: left;
position: relative}
.main li a {display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;}
.main a {text-decoration: none;
color: black;}
.main2 li {position: absolute;
display: none;
width: 100%
}
/*Changed this part*/
.main li:hover .main2 li {display: block;}
.main2 li a {color: black;
text-decoration: none;
display: block;}
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>
Blog
<!-- Move this inside li -->
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Forum</li>
<li>Kontakt</li>
<li>
Links
<!-- Move this inside li -->
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</nav>
</div>
When I moved the nav bar up by adding -bottom: 220px; to nav ul{} it now does not displays my nested lists correctly. They are white or not there until you hover. I'm sure it's something simple but I can't seem to figure it out. I appreciate the help! If you remove the -bottom: 220px; it should display correctly.
#charset "UTF-8";
/* CSS Document */
/* START NAVIGATION BAR */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #656565;
background: linear-gradient(top, #bbbbbb 0%, #656565 100%);
background: -moz-linear-gradient(top, #bbbbbb 0%, #656565 100%);
background: -webkit-linear-gradient(top, #bbbbbb 0%, #656565 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
bottom: 220px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
/* END NAVIGATION BAR */
/* START Social Media Icons */
#socialIcon1 {
position:relative;
left: 390px;
bottom: 280px;
}
#socialIcon2 {
position:relative;
left: 170px;
bottom: 220px;
}
/* END Social Media Icons */
/* HEADER */
#contactInfo {
position:relative;
bottom: 140px;
left: 40px;
}
#logo {
position:relative;
right: 220px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Southern Oregon Gymnastics Academy</title>
<link href="SOGAnavBar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align= center>
<img src="../Images/sogaLogo.png" alt="Southern Oregon Gymnastics Academy" name="logo" width="329" height="143" id="logo" longdesc="http://soga-gym.com/" />
<h2 id= "contactInfo">3001 Samike Dr. <br />Suite 112, <br />Medford, OR 97501 <br /> 541-245-9379</h2>
<img src="../Images/twitter.png" alt="Fallow SOGA on Twitter" name="twitter" width="217" height="61" id="socialIcon1" />
<img src="../Images/facebook.png" alt="Like SOGA on Facebook" name="socialIcon2" width="217" height="61" id="socialIcon2" longdesc="https://www.facebook.com/Southern.Oregon.Gymnastics.Academy" />
<nav>
<ul>
<li>Home</li>
<li>Our Classes
<ul>
<li>Birthday Parties</li>
</ul>
</li>
<li>Our Team</li>
<li>About Us
<ul>
<li>Birthday Parties</li>
<li>Field Trips</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
You're using a lot of relative positioned elements and that is causing the extra space to exist. Rather than trying to position everything manually, let it happen automatically like this:
a, h2 {
display: inline-block;
}
Get rid of the bottom:220px you added and all of your CSS below /* END NAVIGATION BAR */. This will allow the elements in your header to flow next to each other.
http://jsfiddle.net/dsPNJ/
Just use nav > ul instead of nav ul on line 13.
I'm trying to make sub-menus for my menu, but something just isn't right and I cant seem to change the colour and layout of the submenus itself.
* { margin:0;
padding:0;
}
html {height: 100%;}
body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
position: relative;
float: left;
}
ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: :;0px;
left: 100px;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
display: inline-table;
}
li {
margin: 5px 0 0 0;
}
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url() no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}
ul.nav li ul { display:none;
}
ul.nav li:hover ul {
display:block; }
<div class="navbox">
<ul class="nav">
<div class="navbox">
<ul class="nav">
<li>Program
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></li>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
</div>
I've been looking at a guide, http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
If you look at the 4th picture, you'll see how I want my own dropdowns to look, even tho the code is there, I've tried to fix the problem myself. So the problem is, when I try to change the layout to look like the one on the 4th picture, it wont change thesubmenu dropdown layout, it'll just create a weird looking box under the boxlayout it self.
Thanks for help! :)
If you add position:absolute to your hovering it will start to work:
ul.nav li:hover ul {
display:block;
position:absolute;
}
Then add a background(-color) and some other styling and you can get to this example:
http://jsfiddle.net/w1ll3m/zz83R/1/ (based on your code)
Good luck!
I'm trying to highlight the "Personal Training" link and any other drop down links when a child link is hovered.
For example: The user hovers the "Personal training" link then the dropdown menu shows. Then while he down the list, "Personal Training" is still highlighted.
HTML:
<ul id="nav">
<li>Home</li>
<li>Personal Training
<ul>
<li>Sign Up</li>
<li>Meet The Trainers</li>
</ul>
</li>
</ul>
CSS:
#header a {
margin: 0px;
padding: 10px;
display: block;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #000;
}
#nav a:hover {
margin: 0px;
padding: 10px;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F));
}
#nav li ul {
width: auto;
position: absolute;
display: none;
background-color: #0F0;
background-image: none;
}
#nav ul li:hover {
width: auto;
position: absolute;
background-color: #00F;
background-image: none;
}
#nav ul a:hover {
background-color: #00F;
background-image: none;
}
#nav li a:hover + a {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F));
}
#nav li:hover ul {
display: block;
}
I the code that shows the dropdown menu works and it highlights any single item that is hovered all I need is how to highlight a dropdown link and its parent link.
Thanks in advance, Slulego
Since the submenu is a ul contained in your menu header li, you should be applying the :hover styling to the li, and not the a. See it in action in this JSFiddle.
I changed the CSS selector #nav a:hover to #nav > li:hover.
And, though it needn't be said, the aesthetics of that JSFiddle is far from optimal; I just hacked it together to show what I'm talking about :)
So i have an issue with a CSS dropdown menu being displayed wrong in IE. In other browsers it works like it should.
<body>
<div id="container">
<header>
<div id="hlogo">
title
</div>
<nav id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</nav>
</header>
<section id="container-body">
<div id="content">
</div>
</section>
</div>
So this is my complete HTML. It has a layout provided by the following css.
/* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}
footer {
display:block;
position:relative;
width:100%;
}
footer > #disclamer {
margin-left: auto;
margin-right: auto;
width: 200px;
padding-bottom:5px;
font-size:small;
font-weight: bold;
}
#container{
background-color:#ffffff;
margin:auto;
min-width:756px;
width:60%;
overflow:hidden;
border:solid 2px #666666;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.6);
}
#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}
#hmenu{margin-top:45px;padding:10px;}
nav {
list-style:none;
display:inline;
float:right;
}
nav ul{
list-style: none;
text-align:center;
background-color:#666666;
float:left;
}
nav ul li {
width:128px;
float:left;
display:inline-block;
}
nav ul li:hover{
background-color:#cc3333;
cursor:pointer;
}
nav ul li a {
color:#ffffff;
padding:10px;
}
nav ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer
}
section {margin:10px;}
#container > header {display:block;}
#container-body {
background-color:#ececec;
height:600px;
display:block;
overflow:auto;
}
#container-body > #content {
margin: 10px;
height:95%;
position:relative;
}
.hiddenMenu
{
position:absolute;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
width: inherit;
}
.hiddenMenu > a
{
position:relative;
text-align: left;
clear:both;
font-size:0.75em;
}
nav li .hiddenMenu > a
{
display:none;
}
/*nav li:hover .hiddenMenu > a
{
display:block;
}*/
nav li .hiddenMenu > a:hover
{
background-color:#cc3333;
cursor:pointer;
border: 1px black solid;
}
This is the full CSS.
This is the CSS i use. Now in firefox it works as it should. The menu is show when i hover the menu2 item. On IE it shows the first submenu item (submenu1) and then it is cleared so i can't even click it.
I can't see what i'm doing wrong so if you can help me i would appreciate it. Thanks!
edit: added code.
The header tag has an overflow:hidden attribute; if i set that to visible it will show the complete menu but will mess up my layout completely. Is there a way around it or am i doing something wrong?
Also, i have a jquery script to set the display on the menu to none/block accordingly but in IE if i hover on the submenu items the menu will still be hidden. Why does this happen?
In my experience IE gets a bit buggy when you don't set the positions of an absolute positioned object. Like top: 0 and left: 0 for instance.
Edit:
Also, parent of the absolute positioned object should have position: relative; if the position should be using the parent dimensions as a starting point.
Edit2:
li:hover doesn't work in IE6 I think. Can't remember about IE7. One of them will only accept a:hover, and browsers below maybe none of them. jQuery solves things like that though.
Edit3:
I don't know what the nav stuff is, I haven't jumped to HTML5 so I don't know if it's relevant later. But anyway I've made something that works of your code.
Script (jquery):
$(document).ready(function () {
$('#hmenu ul li').hover(function () {
$(this).children('div').css('display', 'block');
},
function () {
$(this).children('div').css('display', 'none');
});
});
CSS:
#hmenu {
list-style: none;
display: inline;
float: right;
}
#hmenu ul {
list-style: none;
text-align: center;
background-color: #666666;
float: left;
}
#hmenu ul li {
width: 128px;
float: left;
position: relative;
display: inline-block;
}
#hmenu ul li:hover {
background-color: #cc3333;
cursor: pointer;
}
#hmenu ul li a {
color: #ffffff;
padding: 10px;
}
#hmenu ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer
}
.hiddenMenu {
display: none;
position: absolute;
top: 60;
left: 0;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
width: inherit;
}
(sorry for the formatting, bit new to this, but you can apply source formatting in your editor I guess. I changed the navs to have the id and changed the HTML nav to be div. That's it.
HTML:
<div id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</div>
You cannot have a tag named nav change it to div and try again.