I'm making a dropdown menu for a website. I got the first segment working, but when I want to make one element to show other options on its right side, it's just not working.
It's just some basic HTML and CSS setting, I am just a beginner. I've tried decluttering the code and doing it in the simplest way possible.
li a, dropbtn {
display: 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;
}
.dropdown:hover .dropdown-content {
display: 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;
}
.two {
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;
margin-top: -40px;
margin-left: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
<!-- About section -->
<li class="dropdown">
<a class="dropbtn">About</a>
<div class="dropdown-content">
Mission
<div class="two">
Team
</div>
Our Story
Partners
Team
</div>
</li>
I would like to understand what I am doing wrong, and how can I make this work.
Use + sign to select the sub menu in css and make it display:block. Check below code:
.dropdown-content a:hover + div {
display:block;
}
See the Snippet below:
li a, dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color:gray;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: 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;
}
.two {
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;
margin-top: -40px;
margin-left: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown-content a:hover + div {
display:block;
}
<!-- About section -->
<li class="dropdown">
<a class="dropbtn">About</a>
<div class="dropdown-content">
Mission
<div class="two">
Team
</div>
Our Story
Partners
Team
<div class="two">
CEO
</div>
</div>
</li>
Related
Drop down menu is not showing after using overflow. I want use overflow in div but its not working on hover.
Here's my code.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
overflow:scroll;
}
.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;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can see layout current show
I want to this
To achieve that, you have to set overflow:scroll to the button instead of giving overflow to the drop down content.
Try this.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
overflow:scroll;
}
.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;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I have two pages of code. I want the first page's dropdown menu to look like the second page's dropdown menu. The second page is some code I copied and pasted from W3 Schools.
The problem is on the first page the drop down menu's width is the same as the navigation bar. I want to have a smaller width for the navigation bar and I can't figure out how why it is the same width of navigation bar.
First Page
ul {
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;
list-style-type: none;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
padding: 50px 100px;
text-decoration: none;
color: white;
}
li a:hover {
color: white;
background-color: #333;
}
.dropdown {
display: inline-block;
}
.dropcont {
display: none;
position: absolute;
background-color: #333 min-width:200px;
z-index: 1;
}
.dropcont a {
color: white;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
Second Page
ul {
list-style-type: none;
margin: 0;
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: red;
}
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;
}
.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;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Here is the updated css :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
}
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:#333;
}
li.dropdown {
display: inline-block;
}
.dropcont {
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;
}
.dropcont a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropcont a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
I'm trying to create a simple dropdown menu (with only CSS) in a navbar with multiple links, the problem is that the dropdown menu will show with every link and not only with the desired one. Here is the code:
HTML & CSS
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
}
.dropDown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.topNav .mainLink:hover .dropDown {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
The dropdown will have to show only on the "menuIcon" link.
You already have an ID on the <a> tag you want to trigger the :hover so use that as reference selector. Also your code doesn't work because .dropDown ins't a child of your link change it to match as sibling:
#menuIcon:hover ~ .dropDown
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav:after {
content:"";
display:table;
clear:both;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
background:#e1e1e1;
display: none;
position: absolute;
top:100%;
z-index: 1;
min-width: 160px;
}
.dropDown a {
float:none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuIcon:hover ~ .dropDown, .dropDown:hover {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
I want to see a dropdown menu as soon as I hover on the About button, but when I do, I can only see half of it. What am I doing wrong in my code?
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);
}
body {
background-color: #1A1617
}
ul {
text-align: center;
list-style-type: 0px;
margin: 0px;
padding: 20px;
background-color: black;
overflow: hidden;
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li {
display: inline;
}
li a:hover {
background-color: red;
text-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><p>Check</p></div>
</div>
</ul>
</body>
</html>
Issue:
You are using overflow: hidden in the ul element, which doesn't allow its children (li, div) to exceed their parent's width and height and that's the reason why your dropdown menu is cut.
Corrected 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);
}
body {
background-color: #1A1617
}
ul {
text-align: center;
list-style-type: 0px;
margin: 0px;
padding: 20px;
background-color: black;
/*overflow: hidden; ← REMOVE THAT */
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li {
display: inline;
}
li a:hover {
background-color: red;
text-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><p>Check</p></div>
</div>
</ul>
</body>
</html>
I have completely redone this almost entirely from scratch; a few issues related to recommended web design standards were not introduced that should have been, I hope you can learn from my work here today:
The actual problem was linked to setting a relative element within the .dropdown class.
Here in the HTML5 Code I created:
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="UTF-8">
<title>Red And Black Navigation Bar</title>
<style>
body {
background-color: #1A1617;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-width: 320px;
}
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
border: 1px solid white;
}
li {
display: inline;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-size: large;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: center;
}
.dropdown:hover .dropdown-content {
display: block;
padding: 5px;
}
.goCenter {
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li><a class="achome.html">Home</a></li>
<li>News</li>
<li class="dropdown">
About
<div class="dropdown-content">
<p>The About Goes Here...</p>
</div>
</li>
</ul>
<p class="goCenter"></p>
</body>
</html>
I am using this button drop down located here. I need to make it look like the below picture
when you hover the drop down its flush with the left side of the button how can I make it flush to the right side and not the left.
*.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);
}
.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;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
you just need to add right:0 to dropdown-content, because by default the position:absolute it is aligned to left (like left:0)
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
/* demo */
left: 300px
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0
}
.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;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Adding dir="rtl" attribute to you dropdown div will solve your issue.
<div class="dropdown" dir="rtl">
Check here if this is the result you want to get?