This is my fiddle i seen some topics on this website to make it happen, but i am making some mistakes in applying it. Can someone help me.
I wanna make the navigation bar fixed on top on scroll.
body {
width: 100%;
height: 100%;
margin:0px;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
}
.navbar li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
color: #f2f2f2;
}
.navbar li.dropdown {
display: inline-block;
}
.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: #333}
.navbar .show {display:block;}
.xavierslogo {
width: 110px;
height: 109px;
margin-left: 20%;
}
.xavierstext {
width: ;
height: ;
margin-left: 0%;
}
.topbg {
background-color: #333;
}
<header class="topbg">
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>
<ul class="navbar">
<li>Home</li>
<li>Text one</li>
<li>Text Two</li>
<li class="dropdown">
Dropdown ▼
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="main">
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>
</div>
add the following code to this class
.navbar {
list-style-type: none;
overflow: hidden;
position:fixed;
}
body {
width: 100%;
height: 100%;
margin:0px;
}
.navbar {
list-style-type: none;
overflow: hidden;
position:fixed;
}
.navbar li {
float: left;
}
li a, .dropbtn {
display: inline-
block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
color: #f2f2f2;
}
.navbar li.dropdown {
display: inline-block;
}
.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: #333}
.navbar .show {display:block;}
.xavierslogo {
width: 110px;
height: 109px;
margin-left: 20%;
}
.xavierstext {
width: 100;
height: 100;
margin-left: 0%;
}
.topbg {
background-color: #333;
}
<header class="topbg">
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>
<div>
<ul class="navbar">
<li>Home</li>
<li>Text one</li>
<li>Text Two</li>
<li class="dropdown">
Dropdown ▼
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div class="main">
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>
</div>
Related
So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?
function myFunction() {
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script
Edited CSS and HTML:
function removeListItem(ev) {
const EL_list = ev.currentTarget.closest("li")
EL_list.remove();
}
const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }
html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}
#navbar {
background-color: #333;
position: sticky;
display: flex;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#navbar>a {
display: block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar .home {
background-color: green;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
display: flex;
}
.dropdown-list li a {
padding: 14px 16px;
flex: 1;
}
.dropdown-list li:hover a {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#main-container {
padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
Google
<button class='deleteBtn'>X</button>
</li>
<li>
Youtube
<button class='deleteBtn'>X</button>
</li>
<li>
Amazon
<button class='deleteBtn'>X</button>
</li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
use preventDefault().
Read More about preventDefault
function myFunction(e) {
e.preventDefault();
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
#menu {
overflow: hidden;
background: #202020;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
position: relative;
padding: 0px 100px 0px 40px;
line-height: 70px;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: 'Varela Round', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.5);
border: none;
}
/* Dropdown Content (Hidden by Default) */
#menu .dropdown-container{
position: relative;
}
#menu .dropdown {
position: relative;
display: inline-block;
}
#menu .dropdown-content {
position: absolute;
display: none;
background-color: #202020;
min-width: 160px;
z-index: 9999;
box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.5);
}
/* Links inside the dropdown */
#menu .dropdown-cotainter a {
color: rgba(255,255,255,0.5);
padding: 3px;
position: relative;
text-decoration: none;
display: Block;
z-index: 9999;
}
/* Change color of dropdown links on hover */
#menu .dropdown-content a:hover {color: #ddd;}
/* Show the dropdown menu on hover */
#menu .dropdown:hover .dropdown-content {
display: block;
z-index: 9999;
}
import React from 'react';
import {
Link
} from 'react-router-dom';
function Header() {
return (
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<img src="images/poli.png" height="200" alt="" />
</div>
</div>
<div id="menu" class="container">
<ul>
<li><Link to="/">Homepage</Link></li>
<li>
<div class="dropdown">
<a>Services</a>
<div class="dropdown-container">
<div class="dropdown-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
</div>
</div>
</li>
<li><Link to="/AboutUs">About Us</Link></li>
<li><Link to="/ContactUs">Contact Us</Link></li>
</ul>
</div>
</div>
);
}
export default Header;
when i hover on the link i can see a part of the menu showing but not all of it, i think it's because the container is covering it but i don't know how to make the menu independant or above the container to be shown. I tried to change position to absolute but it still doesn't work. can someone help me out :D
if you remove overflow: hidden your code works.
#menu {
overflow: hidden; //remove this line
background: #202020;
}
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 have a menu with two menu items and when the user clicks on each item, a sub-menu is displayed.
The issues is both menues displayed at the same spot - under the first item. I have been tweaking it for a while but cannot figure out a way to fix the issue.
Also I need to make sure as one menu item clicked, the sub-menu for the other item disappears. Can anyone point me in the right direction?
$(document).ready(function(){
$('.menu-item').on('click', function() {
$(this).children(".dropdown-content").toggle();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {float: right !important;}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin:0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png">
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png">
<a class="hide-on-med-and-down white-text" href='#'> <span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
For the positioning, set display: inline-block on #nav-mobile li and give it a width. In this example, I set its min-width to 5em but do what makes sense in your design.
To close the other one there’s a few options but just doing $(this).siblings().children(".dropdown-content").hide(); may be enough.
$(document).ready(function(){
$('.menu-item').on('click', function() {
$(this).children(".dropdown-content").toggle();
$(this).siblings().children(".dropdown-content").hide();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {float: right !important;}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
min-width: 5em;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin:0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png">
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png">
<a class="hide-on-med-and-down white-text" href='#'> <span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
Add position: relative to #nav-mobile li and left: -50px or your desired value to dropdown.
$(document).ready(function() {
$('.menu-item').on('click', function() {
$(".dropdown-content").hide();
$(this).children(".dropdown-content").toggle();
});
});
#nav {
width: 100%;
height: 3em;
color: #fff;
line-height: 3em;
}
#nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {
float: right!important;
}
#nav-mobile {
list-style-type: none;
margin-top: 0;
}
#nav-mobile li {
display: inline;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
position: relative;
}
#nav-mobile li a {
text-decoration: none;
/*position: relative;*/
}
#nav-mobile li img {
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
min-width: 120px;
left: -50px;
}
#nav-mobile li .dropdown-content li {
display: block;
margin: 0;
width: 100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin: 0;
padding: 0.25em 1.75em 0.25em 1.2em;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #E0E0E0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png" />
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png" />
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
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;
}