I have a weird problem with my project, I tried to create drop down menu,
and I used even simple example from 3 w school and it is not working, here is my code:
.dropdown {
position: relative;
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);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<span className="span1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
I saw solutions like .dropdown:hover +.dropdown-content and it is not working too.
This works & only hovers on text because your .dropdown has no padding to it.
In this example, I added padding & pushed down the open menu that you had position absolute on.
Now when space around is hovered, the dropdown is triggered. I also added the :focus-within tag to the css trigger, this allows a user to tab into the parent menu then the open menu.
.dropdown {
background-color:orange;
padding: 20px;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
top:60px;
left:0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content
{
display: block;
}
<div class="dropdown">
<span className="span1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Related
When I give top: 2rem to dropdown-content it works fine but doesn't look good.
It does look fine at 3rem but dropdown just disappears when I hover it. I tried with :focus and :active still same.
body {
display: grid;
place-content: center;
}
.consumer-header__menu-label {
position: relative;
cursor: pointer;
display: flex;
padding: 0 1rem;
}
.dropdown-content {
position: absolute;
top: 3rem;
right: 0;
display: none;
background-color: #ffffff;
width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.eds-dropdown-menu__contents:hover .dropdown-content {
display: block;
}
<div class="consumer-header__menu">
<div class="dropdown-menu">
<div class="eds-dropdown-menu__contents">
<div class="consumer-header__menu-label">
<div class="dropdown-content">
<li>Why Eventbrite?</li>
<li>Pricing</li>
<li>Resources</li>
</div>
Organize
<span class="eds-dropdown-menu__icon">
Custom Icons Component
</span>
</div>
</div>
</div>
</div>
I would use the native HTML <details> element for this:
body {
display: grid;
place-content: center;
}
details {
min-width: 260px;
}
details:hover, summary:focus {
cursor: pointer;
background-color: #eee;
}
details ul {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
<div class="consumer-header__menu">
<div class="dropdown-menu">
<div class="eds-dropdown-menu__contents">
<details>
<summary>Organize</summary>
<ul>
<li>Why Eventbrite?</li>
<li>Pricing</li>
<li>Resources</li>
</ul>
</details>
</div>
</div>
</div>
I'm trying to make a drop down component (in Reactjs), and I am having trouble on how to make it not pop up outside the browser width.
I have tried to set right: 0px, it works fine when the dropdown is at the rightmost of the panel, but if the dropdown is not then it gets messed up.
here is the codepen for the sample.
here is a sample css
.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:hover .dropdown-content {
display: block;
}
here is a sample html
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
, you can notice that there is a scrollbar there.
What I want to achieve is that I can right align the drop down content, relative to the drop down header.
Thanks
You just need to adjust right side dropdown contents. One possible way is as follow
<div class="dropdown-content d2">
Link 1
Link 2
Link 3
</div>
.d2 {
right:0;
}
Ping me if you have any query.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: right;
}
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: red;
}
li.dropdown {
display: inline-block;
}
div.dropbtn {
display: inline-block;
color: black;
}
.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;
}
.d2 {
right:0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content d2">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
<div class="dropdown">
some other dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
I am working on my school's website, and I have already figured out how to make single drop downs. Here is the code for one menu item.
.navbar {
overflow: hidden;
background-color: #0a0a2a;
font-family: Arial;
border: 3px solid #C5B358;
margin-left: -75px;
margin-right: -75px;
}
.navbar a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: white;
padding: 8px 8px;
background-color: #0a0a2a;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #C5B358;
padding-top: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0a0a2a;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
color: white;
}
.dropdown-content a {
float: none;
color: white;
padding: 10px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #C5B358;
color: #0a0a2a;
}
.dropdown:hover .dropdown-content {
display: block;
}
<form action="index.html">
<div class="dropdown">
<button class="dropbtn">HOME </button>
<div class="dropdown-content">
</div>
</div>
</form>
<!--Modular code begins here-->
<form action="aboutus.html">
<div class="dropdown">
<button class="dropbtn">ABOUT US
</button>
<div class="dropdown-content">
Calendar 2017-2018
Inclement Weather Information
Directions to Tri-County
2016 Report Card
District Information
Business Office
Contact Us
Public Records
School Committee
</div>
</div>
</form>
This works just fine, but some of the menu options, in this case "Business Office", have a submenu that needs to be added. Ideally, this would be a hover drop down that appears to the right of the drop down menu.
However, I can not figure out how this should work, and nothing on the internet seems to answer my question fully. So, I decided to consult trusty old Stack Overflow.
I tried adding the following code to my HTML, making new classes in the CSS with the same properties as the original drop down menu. It did not work.
<div class="sub-dropdown">
<button class="sub-dropbtn"> District Information</button>
<div class="sub-dropdown-content">
School Committee
</div>
</div>
If anybody can help me figure out where I went wrong, that would be much appreciated.
I am having issues with my mobile menu, it looks to be a z-index issue as when the menu is toggled, it appears behind the content below. However, I've been playing with this, and I can not get the toggled menu to the front.
Code:
HTML:
<section class="navigation">
<div class="nav-container">
<div class="brand">
<img class="header-image" src="assets/img/storey-and-co-logo.png" alt="Storey & Co. Solicitors" title="Storey & Co. Solicitors">
</div>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>
About Us
</li>
<li>
Our Team
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Divorce
</li>
<li>
Wills
</li>
<li>
Residential
</li>
</ul>
</li>
<li>
Contact
</li>
<li class="nav-highlight">
Obtain a Quote
</li>
</ul>
</nav>
</div>
</section>
Jquery
(function($) {
$(function() {
$('nav>ul>li').addEventListener('click',function() {
$(this).children('.nav-dropdown').show();
});
$('nav>ul>li').mouseleave(function() {
$('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);
Sass
header
background: $brand-primary
height: $nav-height
clear: both
section.navigation
padding: 0px
clear: both
nav
float: right
ul
list-style: none
margin: 0
padding: 0
li
float: left
position: relative
a
display: block
padding: 0 20px
line-height: $nav-height
background: $brand-primary
color: #fff
text-decoration: none
&:hover
background: $brand-3-dark
color: #fff
&:not(:only-child):after
padding-left: 4px
content: ' ▾'
ul li
min-width: 190px
& a
padding: 15px
line-height: 20px
z-index: 1
.nav-highlight a
background: $brand-3-dark
color: #fff
&:hover
background: $brand-3-primary
.nav-dropdown
position: absolute
display: none
z-index: 1
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15)
.nav-mobile
display: none
position: absolute
top: 0
right: 0
background: $brand-primary
height: $nav-height
width: $nav-height
#nav-toggle
position: relative
z-index: 9
left: 18px
top: 22px
cursor: pointer
padding: 10px 35px 16px 0px
span,
span:before,
span:after
cursor: pointer
border-radius: 1px
height: 5px
width: 35px
background: #fff
position: absolute
display: block
content: ''
transition: all 300ms ease-in-out
span:before
top: -10px
span:after
bottom: -10px
&.active span
background-color: transparent
&:before,
&:after
top: 0
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
#media only screen and (max-width: $breakpoint)
.nav-mobile
display: block
nav
width: 100%
padding: $nav-height 0 15px
ul
display: none
li
float: none
a
padding: 15px
line-height: 20px
ul li a
padding-left: 30px
.nav-dropdown
position: static
#media screen and (min-width: $breakpoint)
.nav-list
display: block !important
.navigation
height: $nav-height
background: $brand-primary
.nav-container
max-width: $content-width
margin: 0 auto
.brand
position: absolute
float: left
padding-top: 10px
vertical-align: middle
text-transform: uppercase
font-size: 1.4em
box-sizing: border-box
a,
a:visited
color: #fff
text-decoration: none
img.header-image
max-width: 200px
#media screen and (max-width: $breakpoint-small)
img.header-image
max-width: 175px
padding-top: 10px
And the live version is here: http://staging-maris-storey.transitiongraphics.co.uk/
Help appreciated
Try adding a relative position and a higher z-index to your nav:
nav {
position: relative;
z-index: 9;
}
I'm not sure why Maggie Serino answer isn't working for you, because it work when I am testing it. However another solution would be to add clear:both; to the first section. The issue is being caused by your fixed height header, which is causing the section below not to be pushed down by the dropdown.
header + section {
clear:both;
}
#Grant Smith if you'd prefer the menu to cover the content you need to give it an absolute position (and the parent needs to be relative). I've tried a bit on your staging and you should add:
nav {
position: relative;
// your other attributes
}
.nav-list {
position: absolute;
width: 100%;
// your other attributes
}
Let me know if it worked.
I have created a dropdown menu that works great in Chrome and Firefox but when trying it in IE 11 the dropdown content ends up on the side.
I've googled and search but cannot find a solution.
note that it should go into a Django Administration page header and that's why there are a few !important. It also means that the dropdown should be on top of all other elements on the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="text-align:left;float:left;">Test</h1>
<style type="text/css">
.dropbtn {
background-color: #417690;
color: #f5dd5d !important;
padding: 6px;
font-size: 16px;
border: none;
cursor: pointer;
}
.droplink {
background-color: #417690;
color: #f5dd5d !important;
padding: 4px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdowncontainer {
display: inline-block;
padding-top: 10px;
}
.dropdown {
float: left;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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: 1000;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black !important;
padding: 6px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
color: black;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #376880;
}
.droplink:hover {
background-color: #376880;
}
</style>
<div class="dropdowncontainer">
<div class="dropdown">
<a class="dropbtn" href="">XXX</a>
<div class="dropdown-content">
Installations
Files
Tasks
Releases
Copy
</div>
</div>
<a class="droplink" href="node.html">Nodes</a>
</div>
</body>
</html>
I've created a JSFiddle with the code. Any help would be greatly appreciated.
JSfiddle
Try giving position: relative to .dropdown class.
The behaviour of position: absolute elements when no explicit position: relative element has been specified varies from browser to browser. Hence, the anomaly.
Also add top: 0 & left: 0 to .dropdown-content
.dropdown-content {
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
Try set for .dropdown-content left and top values.