I am making dropdown menu for my main menu, there is username where user clicks and then it shows the content (dropdown menu), This was made by checkbox type input for the button.
Unfortunately, menu doesn't seem to show at all, and disappears at the end of the menu.
Menu:
HTML:
<div class="profilebar">
<div class="dropdown" style="cursor: pointer;">
<input type="checkbox" id="droptoggle" class="toggled">
<label for="droptoggle" class="profilename" style="cursor: pointer;">{{ username }}<span class="caret">▾</span></label>
<ul class="dropdown-menu" role="menu">
<li class="sub-menu">
Link1
Link2
Link3
<a href-"/">Link4t</a>
</li>
</ul>
</div>
<img class="profilepicture" src="url here"></img>
<p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>
</div>
CSS:
.profilebar {
float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1.5%;
min-width: 70px;
}
.profilename {
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 400;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.caret {
margin-left: 3.5%;
font-size: 8pt;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 4%;
}
.dropdown-menu {
display: none;
position: absolute;
margin: 2px;
width: 10px;
min-width: 10px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu + a:hover {
background-color: #C90205
}
.toggled {
visibility: hidden;
display: none;
}
.profilepicture {
position: absolute;
margin-left: 1.2%;
border-style: groove;
border-width: 1.5px;
}
.balance {
position: relative;
margin-top: 2.3%;
color: red;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 12pt;
color: #C90205;
margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
display: block;
z-index: 99;
}
Fiddle ( Don't look at image, it is placeholder anyway ).
So what can the problem be? i have tried z-index on positioned elements which didn't seem to work out, how can i make dropdown menu overlay every other element so it can be fully seen?
The menu has overflow: hidden, so it will hide when going beyond the content, removing the overflow: hidden from the menu class shows the dropdown menu.
Fiddle
<style>
.profilebar {
/* float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1.5%;
min-width: 70px; */
position: absolute;
top: 0.5%;
right: 1.5%;
width: 150px;
height: 7%;
border: 1px solid #777;
}
.profilename {
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 400;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.caret {
margin-left: 3.5%;
font-size: 8pt;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 4%;
}
.dropdown label {
color: #333;
}
.dropdown-menu {
display: none;
position: absolute;
margin: 2px;
width: 100px;
min-width: 10px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-menu a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu + a:hover {
background-color: #C90205
}
.toggled {
visibility: hidden;
display: none;
}
.profilepicture {
position: absolute;
margin-left: 1.2%;
border-style: groove;
border-width: 1.5px;
}
.balance {
position: relative;
margin-top: 2.3%;
color: red;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 12pt;
color: #C90205;
margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
display: block;
z-index: 99;
}
</style>
<body>
<div class="profilebar">
<div class="dropdown" style="cursor: pointer;">
<input type="checkbox" id="droptoggle" class="toggled">
<label for="droptoggle" class="profilename" style="cursor: pointer;">USERNAME<span class="caret">▾</span></label>
<ul class="dropdown-menu" role="menu">
<li class="sub-menu">
Link1
Link2
Link3
Link4
</li>
</ul>
</div>
<img class="profilepicture" src="url here"></img>
<p class="balance" style="text-decoration:none">BALANCE</p>
</div>
</div>
Related
I already did some search on some questions here on stack overflow and tested some solutions mentioned but it did not fix my problem. I'm new in coding.
I also did some research online but haven't found answers that fixed my problem.
-FIRST PROBLEM SOLVED-
-NEW PROBLEM DESCRIBED BELOW-
Edit: Dropdown menu positioning fixed, it is now on vertical. But the new problem is dropdown menu items quickly disappears before I hover on it. And it seems my login form was not attached inside the nav. Please check if the is a conflict or problem with my css and code. Can't fix it
Here is my code:
/*MY CSS CODE*/
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}
<body>
<header>
Team-Rocket
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Search by ID</li>
<li>Search by Username</li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Regional Distributors</li>
<li>Provincial Distributors</li>
<li>City Distributors</li>
<li>Reseller</li>
<li>Sub-Reseller</li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
</body>
edit your .dropdown-content like this:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
flex-direction: column; /* <--- here add this line */
padding: 0; /* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
and edit .dropdown:hover .dropdown-content like this:
.dropdown:hover .dropdown-content {
display: flex; /* <-- replace 'block' by 'flex' */
}
This will work properly.
Here is the snippet:
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav > ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}
<header>
Team-Rocket
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Search by ID</li>
<li>Search by Username</li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Regional Distributors</li>
<li>Provincial Distributors</li>
<li>City Distributors</li>
<li>Reseller</li>
<li>Sub-Reseller</li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
Add a new line to css
.dropdown-content li{
float:none;
}
I'm trying to figure out on how to give a space in between my top navigation menu and the dropdown list (when hovered). Here is the screenshot of it.
there is no space so it looks kind of crowded
I've tried adding a margin-top: 10px; to the css of the dropdown, but it made the hover not working anymore.
Here is my code:
.header {
position: relative;
top: 0; left: 0; right: 0;
width: 100%;
height: 140px;
line-height: 140px;
background-color: #060930;
}
.header .btn {
display: inline-block;
vertical-align: middle;
line-height: normal;
margin-left: 2%;
}
.ad, .arch, .abt {
font-family: 'product_sansbold';
font-weight: normal;
font-style: normal;
background-color: transparent;
border: transparent;
cursor: pointer;
margin: 0 4px;
}
.ad {
color: #FBF3FF;
font-size: 32px;
}
.arch, .abt {
color: #a1a6e6;
font-size: 18px;
}
.arch:hover, .abt:hover {
transition-duration: 0.3s;
color: #d7daff;
}
.arch:active, .abt:active {
color: #d7daff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-cont {
display: none;
position: absolute;
background-color: #a1a6e6;
min-width: 160px;
border-radius: 6px;
z-index: 1;
}
.dropdown-cont a {
font-family: 'product_sansbold';
color: #060930;
padding: 14px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-cont {
display: block;
background-color: #a1a6e6;
}
.dropdown-cont a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<div class="header">
<div class="btn">
<button class="ad" type="button" onclick="window.location.href='index.html'"><b>AD.</b></button>
<div class="dropdown">
<button class="arch" type="button" onclick="window.location.href='archive.html'"><b>Archive</b></button>
<div class="dropdown-cont">
Stories
Photos
</div>
</div>
<button class="abt" type="button" onclick="window.location.href='about.html'"><b>About</b></button>
</div>
</div>
</html>
What you want to do is give it a border rather than a margin. Margin will shift that entire element down so once you stop hovering, it wont appear. I have given it a border of 10px but you can tweak it however you like.
.header {
position: relative;
top: 0; left: 0; right: 0;
width: 100%;
height: 140px;
line-height: 140px;
background-color: #060930;
}
.header .btn {
display: inline-block;
vertical-align: middle;
line-height: normal;
margin-left: 2%;
}
.ad, .arch, .abt {
font-family: 'product_sansbold';
font-weight: normal;
font-style: normal;
background-color: transparent;
border: transparent;
cursor: pointer;
margin: 0 4px;
}
.ad {
color: #FBF3FF;
font-size: 32px;
}
.arch, .abt {
color: #a1a6e6;
font-size: 18px;
}
.arch:hover, .abt:hover {
transition-duration: 0.3s;
color: #d7daff;
}
.arch:active, .abt:active {
color: #d7daff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-cont {
display: none;
position: absolute;
background-color: #a1a6e6;
min-width: 160px;
border-radius: 6px;
z-index: 1;
border-top: 10px solid #060930;
}
.dropdown-cont a {
font-family: 'product_sansbold';
color: #060930;
padding: 14px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-cont {
display: block;
background-color: #a1a6e6;
}
.dropdown-cont a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<div class="header">
<div class="btn">
<button class="ad" type="button" onclick="window.location.href='index.html'"><b>AD.</b></button>
<div class="dropdown">
<button class="arch" type="button" onclick="window.location.href='archive.html'"><b>Archive</b></button>
<div class="dropdown-cont">
Stories
Photos
</div>
</div>
<button class="abt" type="button" onclick="window.location.href='about.html'"><b>About</b></button>
</div>
</div>
</html>
I am having trouble trying to remove a gap between a navigation bar and a div that is supposed to show under the navigation bar.
Here's my code:
<%-- Nav Bar --%>
<ul>
<li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li class="dropdown">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</li>
</ul>
<%-- Iframe --%>
<div class="h_iframe">
<iframe src="inicio.aspx" name="ventana" ></iframe>
</div>
This is the CSS I'm using:
body
{
font: 14px 'Segoe UI', 'Helvetica Neue', 'Droid Sans', Arial, Tahoma, Geneva, Sans-serif;
overflow-y: hidden;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.h_iframe iframe {
width: 100%;
height: 100%;
margin-top: 0;
}
.h_iframe {
height: 100%;
width: 100%;
margin-top: 0;
top: 0;
z-index: -1;
padding-left: 159px;
position: fixed absolute
}
.welcometitle {
float: left;
display: block;
color: white;
text-align: center;
padding: 1px 16px;
padding-top: 12px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #006cb4;
padding-left: 163px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
img {
width: 92%;
padding-left: 8px;
margin: 0;
top: 0;
}
.dropbtn {
background-color: #111;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #d4d4d4;
color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
/*display: block;*/
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;
position: fixed;
}
.active {
background-color: #4CAF50;
}
I have tried different things but it just doesn't seem to work. Can you find where I'm messing it up?
You can add some little CSS to the iframe class.
Here is the code:
.h_iframe {
margin-top: -20px;
}
When hovering over the links in drop2 div, the entire drop2 div moves upward a few pixels. Same problem with drop3.
Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.
#nav {
background-color: #373737;
float: left;
height: 30px;
padding: 0px 0px 0px 0px;
width: 970px;
}
.nav a {
display: block;
}
.nav ul li a {
position: relative;
}
a {
text-decoration: none;
}
a.item {
color: white;
}
.item {
position: relative;
}
a.item:hover {
background-color: #dcd0c0;
height: 30px;
color: #373737;
font-weight: bold;
}
.menu {
list-style-type: none;
margin: auto;
width: 970px;
text-align: center;
}
.nav .items {
display: inline;
float: left;
margin: 0px 100px 0px 100px;
padding: 0;
text-align: center;
width: 82px;
}
.drop2 {
display: none;
text-align: left;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.items:hover .drop2 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop3 {
display: none;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 150px;
}
.items:hover .drop3 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop2 > a {
color: #373737;
}
.drop3 > a {
color: #373737;
}
.drop2 > a:hover {
font-weight: bold;
}
.drop3 > a:hover {
font-weight: bold;
}
<div id="nav">
<div class="nav">
<ul class="menu">
<li class="items">
Photos
</li>
<li class="items">
Locations
<div class="drop2">
Bays
Lakes
Pacific Ocean
</div>
</li>
<li class="items">
Catches
<div class="drop3">
Bass
Other
</div>
</li>
</ul>
</div>
</div>
Add line-height: 30px; to your #nav tag in css.
jsfiddle
I'm trying to build a website. But for some reason I am not able to reposition my dropdown list(CSS). Need some help. I need to move that dropdown list to the center.
HTML Code:
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
<a class="dropbtn" style="margin-left: -40px; z-index: -1">Rent</a>
<div class="dropdown-content">
Mountain Bikes
Hybrid Bikes
Road Bikes
City Bikes
</div>
</li>
<li>
FAQ's
</li>
<li>
About
</li>
</ul>
</header>
CSS Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 1;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #6ab47b;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
margin-top: 25px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
Thank you in advance.
You can keep your menu floated to right. In order to center your drop down menu you should do the followings
remove the "margin-left: -40px; inline style from all <a> elements.
insert the following two lines to your .dropdown-content class
right: 50%;
transform: translate(50%,0);
In your CSS the dropdown is floated to right. Just remove it, Dropdown will be in the center.
#main_navbar {
text-align: center;
margin: 0 auto;
/*float: right;*/
margin-top: 25px;
}
accepted
replace this css with what you have for #main_navbar > li > a:
#main_navbar > li > a {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#main_navbar > li > {
text-align:center;
}
try with this below code it may help you.
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
.dropdown-content {
position: absolute;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0 -50px;
font-size: 14px;
text-align: center;
list-style: none;
background-color: #6ab47b;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#main_navbar{
float : right;
}
#main_navbar>li {
float: left;
padding : 10px;
list-style-type : none;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
.dropdown>.dropdown-content {
list-style-type : none;
}
.dropdown>.dropdown-content>li {
padding : 5px;
border-bottom : 1px solid #fff;
}
.dropdown>.dropdown-content>li:last-child {
border-bottom : none;
}
.dropdown>.dropdown-content>li:hover {
background : white;
color : #6ab47b !important;
}
.dropdown:hover .dropdown-content{
display : block
}
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
Rent <span class="caret"></span>
<ul class="dropdown-content">
<li>Mountain Bikes</li>
<li>Hybrid Bikes</li>
<li>Something else here</li>
<li>Road Bikes</li>
<li>City Bikes</li>
</ul>
</li>
<li><a href="faq.html" >FAQ's</a></li>
<li><a href="about.html" >About</a>
</li>
</ul>
</header>