I know similar questions have been asked to do with the z index not working for a dropdown, but all of these have either not worked for my case, or were not applicable for one reason or another.
Anyway, I have an issue that whenever I hover over the main block to trigger the dropdown menu, when it does it appears behind the div that I have in front of it. (Not sure if it matters, but when I hover over an option on the dropdown, it changes colour as it is supposed to do when hovered over and it then jumps in front of the div like it was supposed to do initially).
I am not sure what is causing this as I have tried messing around with the z-index and positions in the css and just can't get it to work, and it would be a great help if someone could find out why this isn't working? I will post the relevant code below.
Thanks
P.S. I have tried in multiple browsers and this problem persists.
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div1>
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div1>
css:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div1 {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: -1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
here is my revision, i put a blue background for seen correct over menu to content.
And there is no element called div1 in DOM html.
i put #navdiv at top of zIndx, because is container of nav.
https://jsfiddle.net/exxe4ksc/
CSS:
#navdiv {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
position:relative;
z-index:100;
}
.navlinks {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #999;
}
li {
display: inline;
}
li a, .dropbutton {
display: inline-block;
color: white;
background:#440099;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #4CAF50;
}
li a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #30313;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: red;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
div#content {
color: white;
font-family: "Times New Roman", Times, Sans-Serif;
text-size: 16px;
z-index: 1;
width: 100%;
top: 0;
position: relative;
height: 200px;
}
HTML:
<nav id="navdiv">
<ul class="navlinks">
<li><a class="active" href="portfolio.html">Home</a></li>
<li><a class="About Me" href="about.html">About me</a></li>
<li class="dropdown">Programming
<div class="dropdown-content">
Python Programs
Android Programs
Other Programs
</div>
</li>
<li><a class="contact" href="contact.html">Contact Me</a></li>
<li><a class="Course Content" href="coursecontent.html">Course Content</a></li>
</ul>
</nav>
<div id ="content">
<p>PLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDERPLACEHOLDER</p>
</div>
It's working just fine as is - you're font off the get go is white though on white background so you don't see it.
Here is a link to a working version.
http://codepen.io/hoonin_hooligan/pen/PpqxBL
.dropdown-content a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
z-index: 1;
}
The problem is not the z-index, try with other color on you hover dropdown like this code:
.dropdown:hover .dropdown-content {
display: block;
background: blue;
}
Related
I'm trying to make to make my first website with html and css (and js later). I want to make a calculator with a dropdown menu, but I'm struggling to make the dropdown menu as when it is hovered over, the dropdown list covers the menu.
.redirect:hover {
background-color: #aac8ff;
}
div {
background-color: #ccd9fb;
}
h1 {
font-size: 20px;
}
.dropdown-content a {
background-color: #aac8ff
}
.container:hover .dropdown-content {
display: block
}
.dropdown-content a:hover {
background-color: #99b7ff;
}
li.container {
display: inline
}
li {
display: inline;
}
body {
background-color: #eefbfb;
}
.top h1,
.top ul {
display: inline-block;
vertical-align: top;
}
.redirect {
text-decoration: none;
font-size: 20px;
display: block;
float: right;
color: #fff;
width: 125px;
text-align: center;
border-left: 1px solid #eefbfb;
padding: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #99b7ff;
}
.dropdown-content a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
<div class="top">
<h1>123Calculator</h1>
</span>
<ul>
<li><a class="redirect" href="equations.html">Equations</a></li>
<li><a class="redirect" href="physics.html">Physics</a></li>
<li class="container">
<a class="redirect" href="maths.html">Maths</a>
<div class="dropdown-content">
Algebraic Expressions
Equations and Inequalities
Sketching Curves
Equations of Straight Lines
Circles
Trigonometry
Exponentials and Logarithms
Differentiation
Integration
Vectors
Proof
Kinematics
Forces
</div>
</li>
</ul>
</div>
I spent at least 3 hours trying to figure out how to make it so that the dropdown list is under "Maths" instead of covering it.
Your .dropdown-content has position absolute, add the top css rule to that selector and push the dropdown-content element down below the main nav.
position: absolute ~ The element is positioned relative to its first positioned (not static) ancestor element. This will allow you to set top, left, right and bottom.
.redirect:hover {
background-color: #aac8ff;
}
div {
background-color: #ccd9fb;
}
h1 {
font-size: 20px;
}
.dropdown-content a {
background-color: #aac8ff
}
.container:hover .dropdown-content {
display: block
}
.dropdown-content a:hover {
background-color: #99b7ff;
}
li.container {
display: inline
}
li {
display: inline;
}
body {
background-color: #eefbfb;
}
.top h1,
.top ul {
display: inline-block;
vertical-align: top;
}
.redirect {
text-decoration: none;
font-size: 20px;
display: block;
float: right;
color: #fff;
width: 125px;
text-align: center;
border-left: 1px solid #eefbfb;
padding: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
top: 58px;
z-index: 1;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #99b7ff;
}
.dropdown-content a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
<body>
<div class="top">
<h1>123Calculator</h1>
</span>
<ul>
<li><a class="redirect" href="equations.html">Equations</a></li>
<li><a class="redirect" href="physics.html">Physics</a></li>
<li class="container">
<a class="redirect" href="maths.html">Maths</a>
<div class="dropdown-content">
Algebraic Expressions
Equations and Inequalities
Sketching Curves
Equations of Straight Lines
Circles
Trigonometry
Exponentials and Logarithms
Differentiation
Integration
Vectors
Proof
Kinematics
Forces
</div>
</li>
</ul>
</div>
</body>
I'm trying to add a navigation bar to a web app I'm making for a class, and I wanted to use a drop-down menu in it (too many things to include to put everything straight across).
I want the bar to be fixed to the top of the page, but when I put in position: fixed;, the drop-down menu stops working.
Is there any way around this? Am I just putting the position: fixed; in the wrong spot, or is conflicting with the drop down content having position: absolute; maybe...?
(I'm very new to web stuff, so if you see anything else I could change/approve, please let me know! Advice very much appreciated)
ul {
list-style-type: none;
margin: 0;
top: 0;
position: fixed;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</br>
</br>
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</head>
</html>
Basically, "View Pages" should become a drop down menu when hovered over with the mouse, and it does if I take out the "position:fixed;" line, but... I want the position to be fixed.
Put your navigation into a layer. And make this layer with fixed position.
.navbar-top {
margin: 0;
padding: 0;
width: 100%;
top: 0;
position: fixed;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
/*position: fixed;*/
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="navbar-top">
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</div>
</body>
</html>
You can delete ul{overflow:hidden;}
You should not apply for the position:fixed on the UL
You can use a div to warp the UL and apply on it the position fixed.
Here is one way to achieve this (live demo):
.mainheader {
height: 25px;
position: fixed;
display: block;
z-index: 10;
background: #333;
width: 100%;
font-size: 14px;
top: 0;
font-family: Calibri;
}
.nav {
width: 100%;
height: 25px;
background: #333;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="mainheader">
<div class="nav">
<ul>
<li>
<a class="active" href="/homePageAgent">Home
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">View Pages
</a>
<div class="dropdown-content">
<a href="/agentViewFlights">View Booked Flights
</a>
<a href="/agentTopCustomers">View Top Customers
</a>
</div>
</li>
<li style="float:right">
<a href="/logout">Logout
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to make a div go under another div in which neither are fixed elements.
Here is my code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
li {
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #4CAF50;
}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #4CAF50;}
.dropdown:hover .dropdown-content {
display: block;
}
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #4CAF50;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
#white {
background-color: white;
width: 90%;
height: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li>Creations</li>
<li>Photos</li>
<li class="dropdown">
<a class="dropbtn" href="#news">Events</a>
<div class="dropdown-content">
DIY
Flea Market Flip
</div>
</li>
<li>Recycle + Upcycle</li>
<li>Saving The Enviroment</li>
<li>Contact Me</li>
</ul>
<div id="white"></div>
I need to be able to make my drop down menu appear over the div named #white. Another note, my links currently lead nowhere, so they are useless right now.
You have css property overflow:hidden in your ul.topnav and need to remove that to show the drop-down menu. Also I added z-index values to ul.topnav and #white so that menu go over the div.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f3f3f3;
z-index: 2;
display: inline-block;
position: relative;
}
#white {
background-color: white;
width: 90%;
height: 1000px;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
}
Here is a example fiddle. Hope this helps you.
i'm trying to fix my responsive navigation bar. supposed to be, when the screen is resized smaller, the navigation will change to a single button which is "menu" and when clicked, it will toggle the navigation vertically. the problem is, even at full screen size, the menu still shows up. this should only appear when screen was changed. thank you
HTML:
<div class="nav">
<ul>
<li ><a class="active" href="index.php">Home</li>
<li >About us
<ul>
<li>Company Profile</li>
<li>Management</li>
<li>Testimonials</li>
<li>Services</li>
</ul>
</li>
<li >Contacts</li>
<li >Careers</li>
<li >Blog
<ul>
<li>Tips</li>
<li>Success Story</li>
</ul>
</li>
<li class="contact">Login</li>
</ul>
<div class="handle"> Menu </div>
</div>
CSS:
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
MEDIA
********************************************/
.handle.hidden {
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: none;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.showing { max-height: 20em; }
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
.handle{
display: block;
background-color: rgba(0,0,0,0.8);
}
}
SCRIPT:
<script type="text/javascript">
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
With your current code you would need to add the class .hidden dinamically to the .menu html element which is not very convenient but there is a simpler way to make the menu disappear. Just try:
.handle { /* now we don't use the .hidden class */
width: 100%;
background: white;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: white;
display: block;
}
...
/* inside media query */
#media screen and (min-width: 650px) {
.handle {
display: none; /* this hides the menu on bigger screens */
background-color: rgba(0,0,0,0.8);
}
}
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>