I would like to resize my dropdown menu to match the link width. Here is a picture of what I currently have:
Here are the relevant parts of my HTML page:
<body>
<div class="navbar">
<nav>
<a href=index.html>About</a>
<a href=projects.html>Projects</a>
<a href=publications.html>Publications</a>
<div class="dropdown">
<button class="dropbtn">Writing
</button>
<div class="dropdown-content">
Why Write?
Dollops
Longforms
Technical/Science
Quotes
Words
Notes
</div>
</div>
</nav>
</div>
Here are the most relevant parts of my CSS stylesheet:
/* Navbar container */
*{
box-sizing: border-box;
}
.navbar {
overflow: hidden;
background-color: #272424;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font: Arial;
font-size: 20px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 25%;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
width: 25%;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
width: 100%;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #81A3A7;
}
/* 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: 1;
}
/* Links inside the dropdown */
.navbar .dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width:auto;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
I tried adding width: 100% to .dropdown-content but the width was too large and extended beyond the writing link to the right.
EDIT: As an extra feature, I would like my links to be appear as "boxes" that are connected without any spaces between them instead of having them appear as on one continuous band of black. How can I do that?
I have make some modification related to the css.
/* Navbar container */
*{
box-sizing: border-box;
}
.navbar {
background-color: #272424;
font-family: Arial;
height:50px
}
/* Links inside the navbar */
.navbar a {
float: left;
font: Arial;
font-size: 20px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 25%;
}
/* The dropdown container */
.dropdown {
float: left;
width: 25%;
position: relative;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
width: 100%;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #81A3A7;
}
/* 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: 1;
width: 100%;
}
/* Links inside the dropdown */
.navbar .dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width:auto;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
<nav>
<a href=index.html>About</a>
<a href=projects.html>Projects</a>
<a href=publications.html>Publications</a>
<div class="dropdown">
<button class="dropbtn">Writing
</button>
<div class="dropdown-content">
Why Write?
Dollops
Longforms
Technical/Science
Quotes
Words
Notes
</div>
</div>
</nav>
</div>
.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;
width: -webkit-fill-available;
}
Setting width to -webkit-fill-available will do the change.
If you want to appear as seperate boxes. You need to use flex feature.
Check out my code :I solved that .dropdown-content issue and Also added extra feature as per u r requirement i.e (spaces between them instead of having them appear as on one continuous band of black)
/* Navbar container */
*{
box-sizing: border-box;
}
.navbar {
overflow: hidden;
background-color: transparent;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font: Arial;
font-size: 20px;
border-radius:4px;
margin:6.2px;
background-color: black;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 23.5%;
}
/* The dropdown container */
.dropdown {
float: left;
margin:6px;
border-radius:4px;
overflow: hidden;
background-color: black;
width: 24%;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
width: 100%;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #81A3A7;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
width:23.5%;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.navbar .dropdown-content a {
float: none;
color: black;
background-color:white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width:auto;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
#media only screen and (max-width: 900px){
.navbar a {
width:22%;
}
.dropdown{
width:22%;
}
.dropdown-content{
width:22%;
}
}
<div class="navbar">
<nav>
<a href=index.html>About</a>
<a href=projects.html>Projects</a>
<a href=publications.html>Publications</a>
<div class="dropdown">
<button class="dropbtn">Writing
</button>
<div class="dropdown-content">
Why Write?
Dollops
Longforms
Technical/ Science
Quotes
Words
Notes
</div>
</div>
</nav>
</div>
Related
So I made this navigation bar and there is 1 title which is a dropdown menu. This title has an other font then the others. If you hover over this dropdown menu, the links do have the right font. Can someone help me with this?
/* Navbar */
.topnav {
list-style-type: none;
overflow: hidden;
background-color: #363636;
box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
transition: all .2s ease-in;
font-weight: 700;
text-transform: uppercase;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 24px 26px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: #bdbdbd;
}
.topnav .icon {
display: none;
}
/* Dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size:16px;
border: none;
outline: none;
color: white;
padding: 24px 26px;
background-color: inherit;
font-family:'PT Sans', sans-serif;
font-style: inherit;
margin: 0;
}
/* 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: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black ;
padding: 24px 26px;
text-decoration: none;
display: block;
text-align: left;
}
/* Background dropdown links */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<!-- Navbar -->
<div class="topnav" id="myTopnav">
<img src="img/logo.png" alt="logo" />
<div class="max-width">
<section class="gray">
Home
About
Gamemodes
Vote
<div class="dropdown">
<button class="dropbtn">Application </button>
<div class="dropdown-content">
Staff
Donators
</div>
</div>
STORE
☰
</div>
Navbar:
https://i.stack.imgur.com/CLEeO.png
Navbar with dropdown:
https://i.stack.imgur.com/kzEa7.png
The reason is because the rest of your nav links are a elements, but your rogue nav link is a button element.
If the drop-down button isn't meant to look different you could just remove the font styling from it:
/* Dropdown button */
.dropdown .dropbtn {
// font-size:16px;
border: none;
outline: none;
// color: white;
padding: 24px 26px;
background-color: inherit;
// font-family:'PT Sans', sans-serif;
font-style: inherit;
margin: 0;
}
And wrap an a element around the rogue nav link.
I write navbar component in my Angular 6 app.
<div class="navbar">
<ul>
<li>tekst</li>
<li>tekst</li>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</ul>
</div>
and .css file:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e8d625;
position: fixed;
top: 0;
width: 100%
}
li {
float: left;
}
li a {
display: block;
color: #090909;
text-align: center;
font-weight: bold;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #f7e525;
}
.active {
background-color: #f7e525;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #77ffb7;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f7e525;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #80f987;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #80f987;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
but it's not working.
When I use the mouse, dropdown does not display anything.. It's difficult to say but I use https://www.w3schools.com/css/css_dropdowns.asp .
Do not I have any libraries?
And other question. Will I be able to use in dropdown later? Beacuse I use RoutingModule.
Very thanks for all answers.
EDIT:
add left navbar
<ul>
<li>Calendar</li>
<li>info1</li>
<li>info2</li>
<li>info3</li>
<li>info4</li>
</ul>
ul {
list-style-type: none;
margin-top: 45px;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
You need to remove the overflow: hidden rule from ul, otherwise the dropdown won't be visible.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #e8d625;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
li {
float: left;
}
li a {
display: block;
color: #090909;
text-align: center;
font-weight: bold;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #f7e525;
}
.active {
background-color: #f7e525;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #77ffb7;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f7e525;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #80f987;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #80f987;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
ul.side {
list-style-type: none;
margin-top: 45px;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
z-index: 1;
}
.side li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
.side li a:hover {
background-color: #555;
color: white;
}
<div class="navbar">
<ul>
<li>tekst</li>
<li>tekst</li>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</ul>
</div>
<ul class="side">
<li>Calendar</li>
<li>info1</li>
<li>info2</li>
<li>info3</li>
<li>info4</li>
</ul>
My current fiddle is working fine apart from one thing. When I hover over the button I see the list displayed. Then when I hover over a list item the background changes colour which is all fine. However when the list item changes colour there is almost a box to the left of the item which is not highlighted and can't seem to get rid of it?
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
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 li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}
If i understand you. i believe you are looking to remove ui margin. you can do that using
ul{
padding: 0;
margin: 0;
}
By default most of HTML tags has some default styling, same is here in ul tag and that's the reason that when you hover li tags the left-side is not highlighted.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
$(document).ready(function() {
var $region = $('#regionList');
$region.append('<li id="Europe">Europe</li>');
$region.append('<li id="Japan">Japan</li>');
$region.append('<li id="North America">North America</a></li>');
$("#regionList li").click(function() {
alert('Clicked list. ' + this.id);
});
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
ul {
padding: 0px;
margin: 0px;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {
background-color: #ddd;
}
/* 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: #4C66E9;
}
.selected {
background: #FF00FF;
}
/*Add this*/
ul{
padding-left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>
I believe below approach solves your problem. It was caused by ul element having default padding. I also added box-sizing: border-box to list elements, so padding won't make li elements stick out of ul.
I added explanation below snippet.
Solution key part
.dropdown-content #regionList {
padding: 0;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
box-sizing: border-box;
text-decoration: none;
display: block;
}
Snippet
$(document).ready(function() {
var $region = $('#regionList');
$region.append('<li id="Europe">Europe</li>');
$region.append('<li id="Japan">Japan</li>');
$region.append('<li id="North America">North America</a></li>');
$("#regionList li").click(function() {
alert('Clicked list. ' + this.id);
});
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content #regionList {
padding: 0;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
box-sizing: border-box;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {
background-color: #ddd;
}
/* 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: #4C66E9;
}
.selected {
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>
Explanation
Problem is caused by browser's default CSS rules, which are for Chrome:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
You can see more here.
The other answers are correct. I just wanted to explain what's going on.
Your user agent stylesheet contains -webkit-padding-start: 40px; for ul elements.
Represented here in green.
As other answers said, override the padding style for ul elements set by your user agent stylesheet.
Just add padding 0 to your regionList
#regionList{
padding : 0;
}
How do I get the words in my nav bar to be centered? I want the Home, News and Dropdown to be centered.
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
/* 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: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<h1>Simple Pure CSS Drop Down Menu</h1>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
You can use flexbox as mentioned in another answer. Another option is removing float properties on the navbar items, and add display: inline-block. Then center everything by adding text-align: center to the navbar
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
display: inline-block;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
/* 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: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Simple Pure CSS Drop Down Menu</h1>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
You could add the following to .navbar:
display: flex;
justify-content: center;
Okay so I'm trying to learn CSS and I'm trying to insert a dropdown button in a navbar.
What's happening is that when I hover the button the whole navbar is expanding instead of only the content of the button. What am I doing wrong? Thanks!
ul {
list-style-type: none;
margin-left:8%;
margin-right: 8%;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: #f3f3f3;
}
.right{
float: right;
}
li a {
float: left;
display: block;
color: #6f6f6f;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #e0e0e0;
}
p {
color: red;
margin-left: 8%;
margin-right: 8%;
}
body{
font-family:Arial;
background-color:#f9f9f9;
}
.dropbtn {
background-color: #f3f3f3;
color: #6f6f6f;
padding: 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
right: 0;
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 10px;
}
/* Links inside the dropdown */
.dropdown-content a {
right: 0;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #e0e0e0}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
right:0;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #e0e0e0;
}
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="right" href="">Search</a></li>
<div class="right">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Links 1
Link 2
Link 3
</div>
</div>
</div>
<li><a class="right" href="#about">Explore</a></li>
</ul>
You have to specify a height and remove the overflow hidden.
ul {
list-style-type: none;
margin-left:8%;
margin-right: 8%;
padding-left: 0;
padding-right: 0;
// overflow: hidden; <---remove
height: 48px; // <---add
background-color: #f3f3f3;
}
If you don't, the ul defaults to as if it has:
height: auto;
Relevant fiddle
You should specify the height of the <ul> element, so it won't expand with the dropdown.