I have a nav i made that works just as i want.. my only issue is the button drop down is to display to the right of the first 2 links how ever it displays first and forces the links to display last.
it displays the links after the drop down so instead of
logo --------------------- Home- News- Dropdown
it displays
logo --------------------- Dropdown- Home- News
drop down should be on the end
CODE
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
min-width: 185px;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {
background-color: #000000
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<ul>
<li>Home
</li>
<li>News
</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
just switch them
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
min-width: 185px;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {background-color: #000000}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<ul>
<li>Home</li>
<li>News</li>
</ul>
</div>
</div>
If I were you I would remove those floats and simplify by using flexbox
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.container-fluid {
display: flex
}
.nav {
flex: 1;
display: flex;
justify-content: flex-end
}
.logo {
flex: 0 50px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: block;
}
li {
display: inline-block
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
color: white;
padding-top: 16px;
padding-bottom: 33px;
font-size: 12px;
text-transform: uppercase;
border: none;
cursor: pointer;
min-width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #434343;
right: 0;
text-transform: uppercase;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px;
}
.dropdown-content a:hover {
background-color: #000
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #434343;
color: white;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="nav">
<ul>
<li>Home
</li>
<li>News
</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
In <ul> I have changed its css property display: block to display: inline-block and for <div class="dropdown"> I have also made it display: inline-block as by default div is block level of element so both can fit in same line and I have wrap both <div> and <ul> to one <div> that will put them on right side by using float: right
see answer in below snippet.
#siteHeader {
padding-top: 22px;
height: 90px;
background-color: black;
}
.logo {
display: block;
height: 45px;
width: auto;
float: left;
}
.nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
.dropdown {
display: inline-block;
float: left;
}
<div id="siteHeader">
<div class="container-fluid">
<img src="../content/images/official_logo_white.png" class="logo">
<div class="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Related
I have navigation bar. I want to move the text 50px from left. I can do this?
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
The menu text is now all the way to the left. I would like to move it 50 pixels further to the right. Is the code wrong or do you just need to add something? I tried adding margin-left: 50px; but it does not work. I state that I am a beginner on programming.
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
This is my html code. I forgot to post it
add padding-left:50px to .navigation. and everything will move to the right 50px
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
padding-left:50px;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
yeah change your padding to 8px 25px 0px 50px
Either adding padding-left: 50px; or transform: translateY(50px);
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
I'm trying to implement a navigation system with a drop down menu. This menu will also have an extra menu that drops to the right. Without using lists.
I'm having difficulties positioning the right down menu. What I'm trying to do is have a menu pop out on the same height but at the right side of the hovered button.
How I wanted to do this was by using absolute position.
What I understand is that
position: absolute; refers to the first positioned parent.
In my case, i'm assuming:-
"navbar" -- Parent
"subnav" -- 1st Child
"subnav-content" -- 2nd child
"subnav-content-subnav" -- 3rd child
"subnavbtn2x" -- 4th child
.subnav-content2x{
position: absolute;
}
When I add the above code, from which class is the position being referenced?
My plan was to have the position from subnavbtn2x
referenced in positioning the right down menu.
Or perhaps someone has a better way of doing it?
HTML
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">First Nav</button>
<div class="subnav-content">
Some page
Some page
Some page
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Second nav</button>
<div class="subnav-content">
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right first</button>
<div class="subnav-content2x">
Right 1
Right 2
</div>
</div>
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right Second</button>
<div class="subnav-content2x">
Right 3
Right 4
</div>
</div>
</div>
</div>
</div>
CSS
.navbar {
overflow: hidden;
}
.subnav {
overflow: hidden;
float: left;
}
.subnav-content {
display: none;
position: absolute;
background-color: #7E8185;
min-width: 160px;
z-index: 1;
}
.subnav-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
margin: 0;
}
.subnavbtn2x {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: -16px -16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.subnav-content2x {
display: none;
position: absolute;
background-color: #7E8185;
margin-left: 1px;
top: 1%;
left: 100%;
min-width: fit-content;
z-index: 1;
}
.subnav-content2x a {
float: left;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: #7E8185;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav .subnav-content-subnav:hover .subnav-content2x {
display: block;
}
Expected result: https://imgur.com/zi4rrgX
current result: https://jsfiddle.net/RBee/cLsgpa5w/
Add
.subnav-content-subnav{
position: relative;
}
.navbar {
overflow: hidden;
}
.subnav {
overflow: hidden;
float: left;
}
.subnav-content {
display: none;
position: absolute;
background-color: #7E8185;
min-width: 160px;
z-index: 1;
}
.subnav-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
margin: 0;
}
.subnavbtn2x {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: -16px -16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.subnav-content2x {
display: none;
position: absolute;
background-color: #7E8185;
margin-left: 1px;
top: 1%;
left: 100%;
min-width: fit-content;
z-index: 1;
}
.subnav-content2x a {
float: left;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: #7E8185;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav .subnav-content-subnav:hover .subnav-content2x {
display: block;
}
/* ===== Edit ===== */
.subnav-content-subnav{
position: relative;
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">First Nav</button>
<div class="subnav-content">
Some page
Some page
Some page
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Second nav</button>
<div class="subnav-content">
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right first</button>
<div class="subnav-content2x">
Right 1
Right 2
</div>
</div>
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right Second</button>
<div class="subnav-content2x">
Right 3
Right 4
</div>
</div>
</div>
</div>
</div>
Live preview: https://jsfiddle.net/v41ubmn8/
add .subnav-content-subnav {position: relative;}
How do i fix the navigation bar, so that the drop-down doesn't go over its parent and it's in line with it?
Also, how do i make the "About" tab to be filled when you hover over it? As you can see it only fills some of it, not until the end of the navigation bar.
There is my fiddle: https://jsfiddle.net/Shade1337/29sd0g07/
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 25px;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Not sure if this is what you want. But here is the solution for what you asked. See the snippet answer.
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;width:100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
top:71px;
position: absolute;
background-color: #1f1d1d;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
<div style="width:25%;float:left">
Home
</div>
<div class="dropdown" style="width:25%;float:left">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
<div style="width:25%;float:left">
Shop
</div>
<div style="width:25%;float:left">
About
</div>
Solution:-
You will add bootstrap css file in your project and use bootstrap classes as per the your requirement
For more Info visit the link:-
https://getbootstrap.com/docs/3.3/getting-started/
The solution for the first problem would be to add height: 100% instead of height: 25px; to .dropbtn class.
And the solution for the second problem would be to change the width of .navigation a and .dropdown and to change padding in .navigation a to padding: 18px 0;
Thus something as follows:
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 0;
text-decoration: none;
width: calc(1078px / 4);
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
width: calc(1078px / 4);
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
box-sizing: border-box;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 14px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Here is the fiddle.
My menu has logo to the left then links beside it, then a dropdown link to the right.. however the dropdown link on the end refuses to float right.
logo ---- link link link link ------------------dropdownlink
#main {
position: fixed;
width: 100%;
padding-top: 0px;
height: 60px;
font-size: 12px;
text-transform: uppercase;
background-color: #000;
z-index: 30;
}
#main a {
text-decoration: none;
}
.logo {
display: block;
margin-top: 10px;
height: 40px;
width: auto;
float: left;
}
.nav {
display: flex;
max-width: 1600px;
}
.right, .left{
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
margin-top: 10px;
color: #f0f0ee;
padding-top: 12px;
padding-bottom: 20px;
border: none;
cursor: pointer;
min-width: 100px;
text-transform: uppercase;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f0f0ee;
min-width: 185px;
right: 0px;
}
.dropdown-content a {
color: #000;
padding: 13px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #e8e8e7;
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #f0f0ee;
color: #000;
}
<header id="main">
<div class="container-fluid">
<div class="nav">
<img src="images/logo.png" class="logo">
<ul class="left">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
<div class="right">
<div class="dropdown">
<button class="dropbtn">link <span class="caret"></span></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</header>
Add css class with right: 0 and position:absolute property
.right {
position: absolute;
right: 0;
}
#main {
position: fixed;
width: 100%;
padding-top: 0px;
height: 60px;
font-size: 12px;
text-transform: uppercase;
background-color: #000;
z-index: 30;
}
#main a {
text-decoration: none;
}
.logo {
display: block;
margin-top: 10px;
height: 40px;
width: auto;
float: left;
}
.right {
position: absolute;
right: 0;
}
.nav {
display: flex;
max-width: 1600px;
}
.right, .left{
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: auto;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 16px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #000;
}
.dropbtn {
background-color: #000;
margin-top: 10px;
color: #f0f0ee;
padding-top: 12px;
padding-bottom: 20px;
border: none;
cursor: pointer;
min-width: 100px;
text-transform: uppercase;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f0f0ee;
min-width: 185px;
right: 0px;
}
.dropdown-content a {
color: #000;
padding: 13px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #e8e8e7;
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.dropdown:hover .dropbtn {
background-color: #f0f0ee;
color: #000;
}
<header id="main">
<div class="container-fluid">
<div class="nav">
<img src="images/logo.png" class="logo">
<ul class="left">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
<div class="right">
<div class="dropdown">
<button class="dropbtn">link <span class="caret"></span></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</header>