I want dropdown effect to go sidways.
I am able to do that with display: inline-table effect. 1) is there a better way to do this??
though above works, it expands content on the right side of parent component( dropbtn in this case). You can refer to below code how this uglyfies layout.
I want to make it span towards left side of parent button so that the button stays at its current position. 2) Is there a way to hack it?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.btn {
background-color: #37abc8ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
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: inline-table;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.wrapper {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="wrapper">
<button class="btn">Hello</button>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
strong text
The fastest and easiest way is to put the .dropdown-content div before .dropbtn button in your HTML structure:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.btn {
background-color: #37abc8ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
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: inline-table;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.wrapper {
display: flex;
justify-content: space-between;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="wrapper">
<button class="btn">Hello</button>
<div class="dropdown">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<button class="dropbtn">Dropdown</button>
</div>
</div>
Related
I'm trying to do a navigation bar but not all the links stay at the same level, the drop down menu ones stay outside the navigation bar div and I can't align them.
Also, the container that has the drop down menu links isn't centered right bellow the drop down link.
I don't know how I can center it.
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 10px;
text-decoration: none;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
Link 1
Example link
<div class="dropdown">
Dropdown menu 1
<div class="dropdown-content">
Link 2
An example link
Link 3
</div>
</div>
<div class="dropdown">
Dropdown menu 2
<div class="dropdown-content">
Link 4
Link 5
An example link 2
</div>
</div>
</div>
Try adding this:
.dropdown a {
display:flex;
}
and your item element with a drop down should get aligned in the same space.
Update 1
You might need to set a fixed width on the submenu in order to keep it centred, like the following:
.dropdown-content {
left: -80px;
margin-left: 50%;
}
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 20px;
text-decoration: none;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown a {
display:flex;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: -80px; /* 160px/2 */
margin-left: 50%; /* 50% */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
Link 1
Example link
<div class="dropdown">
Dropdown menu 1
<div class="dropdown-content">
Link 2
An example link
Link 3
</div>
</div>
<div class="dropdown">
Dropdown menu 2
<div class="dropdown-content">
Link 4
Link 5
An example link 2
</div>
</div>
</div>
Just Add This Code In -> .topNav
align-items: center;
Alright, so I'm doing a web development class and I'm currently working on the last project for the course. I decided that I want a dropdown menu in the navbar so i followed the w3schools tutorial for it, but there is a slight problem. The dropdown, while it looks good, seems to have decided that it's background spanning the entire navbar sounds like a grand idea. Here's how it looks
Any of y'all got any idea how to fix this? this is my code
.menu{
overflow: hidden;
background-color: #000;
max-width: 100%;
position:relative;
top: -120px;
font-size: 16px;
}
.menu a{
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.menu a:link
.menu a:visited{
text-decoration: none;
}
.active{
background-color: #C00;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dopbtn{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdown:hover .dropbtn{
background-color: #9B0000;
}
.dropdown-content{
display: none;
position: static;
background-color: black;
max-width: 160px;
box-shadow: 0px 8px 16px 0px grey;
z-index: 1;
}
.dropdown-content a{
float: left;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover{
background-color: #7B0002;
}
.dropdown:hover .dropdown-content{
display: block;
}
<Html xmlns="http://www.w3.org/1999/xhtml">
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS/Candlekeep.css" />
<title>Home-Candlekeep</title>
</Head>
<Body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
<h1 class="logtxt">Candlekeep</h1>
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
</body>
</html>
There were few modifications required but I was able to fix the issue which you mentioned above, hope it helps.
body {
background-color: gray;
padding: 0;
margin: 0;
}
.menu {
background-color: #000;
position: relative;
font-size: 16px;
height: 32px;
}
.menu a {
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
}
.menu a:link .menu a:visited {
text-decoration: none;
}
.active {
background-color: #C00;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.menu a:hover,
.dropdown:hover .dropbtn {
background-color: #9B0000;
}
.dropdown-content a:hover {
display: block;
background-color: #7B0002;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
<h1 class="logtxt">Candlekeep</h1>
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
</body>
I have a navigation bar that contains elements, two of them are dropdown menus. I fixed the size of the elements on the navigation bar, but Im not able to do it on the elements that drop down. When the drop down comes down it is too wide, but when I hover over the elements, part of only the "fixed width" I specified is highlighted, and the rest isn't. I want them all to be 100px with no extra space on the side, how can I do that?
Code:
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
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);
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
JSFiddle: https://jsfiddle.net/29r9d18a/22/
Remove min-width: 160px from your .dropdown-content CSS class.
Change min-width of this one .dropdown-content and add max-width: 100px; also add word-break: break-word;.
Like this
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
Here is the working code.
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
display: inline-block;
-webkit-padding-start: 0;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 5px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
When I add a dropdown menu using "position: absolute", I want to add "position: relative" to its nearest ancestor "li.dropDownBtn" and find out that it makes the whole dropdown menue disappear. I have been trying to find out the reason but still haven't got an answer. Can anyone help me with this please? Thanks a lot!
<html>
<head>
<style>
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
overflow: hidden;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
/*When this is added, the dropdown disappear
li.dropDownBtn {
position: relative
}
*/
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
</style>
</head>
<body>
<ul class="navBar">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
</body>
</html>
Here's the jsfiddle for this navigation bar page.
overflow: hidden on the main menu is keeping the submenu from showing. I'm assuming you're using that to clear the floats in your nav menu, so added a .clearfix with a different technique that doesn't use overflow: hidden and removed overflow: hidden from your menu's CSS
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
li.dropDownBtn {
position: relative;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<ul class="navBar clearfix">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
Set a height for ul.navBar and take out overflow hidden
ul.navBar {
list-style-type: none;
margin: 0;
padding:0;
background-color: #4277f4;
cursor: pointer;
height:55px;
}
It's because you have this setting:
.dropDownContent {
display: none;
position: absolute;
etc.
Which means the dropdown is not displayed by default (which usually is the desired function...).
And then you have this rule, which makes it visible when you hover its li parent:
li.dropDownBtn:hover .dropDownContent{
display: block;
}
That's the way CSS dropdown menus work, what do you not like about it?
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>