I have a menu button and everything is working nicely. However the button appears quite tall on my page. Even in my fiddle example I can't seem to change the height no matter what I change, why?
I can't see anywhere a height specified either?
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
width: 100%;
}
.dropbtnSub {
background-color: #f1f1f1;
color: black;
padding: 16px;
font-size: 16px;
border: none;
width: 100%;
}
.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;
position: relative;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd;}
.dropbtnSub-content:hover {background-color: #4C66E9;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}
.dropdown-content-list {
display: none;
}
.dropdown-content-list:hover {
display: block !important;
}
.dropdown-content-li:hover .dropdown-content-list {
display: block;
position: absolute;
left: 100%;
top: 0;
background: #efefef;
}
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li class="dropdown-content-li">
<button class="dropbtnSub" value="Region">Country</button>
<div class="dropdown-content-list">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li class="dropdown-content-li">
<button class="dropbtnSub">Export</button>
<div class="dropdown-content-list">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Try changing margin applied in your custom class navbar from 50px to 0px
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
.navbar {
width: 50%;
display: block;
margin: 0px;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
width: 100%;
}
.dropbtnSub {
background-color: #f1f1f1;
color: black;
padding: 16px;
font-size: 16px;
border: none;
width: 100%;
}
.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;
position: relative;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd;}
.dropbtnSub-content:hover {background-color: #4C66E9;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}
.dropdown-content-list {
display: none;
}
.dropdown-content-list:hover {
display: block !important;
}
.dropdown-content-li:hover .dropdown-content-list {
display: block;
position: absolute;
left: 100%;
top: 0;
background: #efefef;
}
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li class="dropdown-content-li">
<button class="dropbtnSub" value="Region">Country</button>
<div class="dropdown-content-list">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li class="dropdown-content-li">
<button class="dropbtnSub">Export</button>
<div class="dropdown-content-list">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Put margin: 0 auto on .navbar.
change from .navbar {margin:50px auto;} to .navbar{margin:0px auto;} or you can also use -5px auto for smaller size of button
Related
My website's responsive navigation dropdown content wont display on the screen, its somehow displaying it outside of the page...
Is there also a way to add a little animation to the click of the content so it wont look so "rough"?
Problem img: http://prntscr.com/p5pre5
The animation isn't a priority, but getting the navigation dropdown content to display on screen is.
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
Support
Order Website
</div>
</li>
</ul>
</nav>
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
Is there also a way to add a little animation to the click of the content so it wont look so "rough"?
1) Add to .dropdown-content code:
transition: 0.2s;
transform-origin: top;
transform: scaleY(0);
2) Add to .dropdown:hover .dropdown-content code:
transform: scaleY(1);
its somehow displaying it outside of the page
1) Add to .li.dropdown code:
position: relative;
2) Add to .dropdown-content code
right: 0;
Result
https://codepen.io/hisbvdis/pen/BaBVGKe
.toggle,
[id=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img {
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
li.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
/* display: none; */
position: absolute;
right: 0;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
transition: 0.2s;
transform-origin: top;
transform: scaleY(0);
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
/* display: block; */
transform: scaleY(1);
}
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
Support
Order Website
</div>
</li>
</ul>
</nav>
In your .dropdown-content class add a right: 0;
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:black;
right: 0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
Support
Order Website
</div>
</li>
</ul>
</nav>
I have created a button (lets call it Menu button) that has 3 lines on it to symbolise a menu. When the user hovers over it displays a list. Up to here the code is doing what I want. It was showing the two buttons however when I give each button a nested list the display goes all funny. Here is my fiddle so far
What I want is when the menu button is hovered over it displays two further buttons (or I guess can just be list items), one button called Region and one called Export. When either of these are hovered over I would like them to display a list to the side of themselves.
HTML
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li>
<button class="dropbtn" value="Region">
<div class="dropdown-content">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li>
<button class="dropbtn" value="Export">
<div class="dropdown-content">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtnLi {
background-color: #9FACEC;
color: white;
font-size: 16px;
border: none;
}
.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;}
On hovering you need to display them separately, i.e. when hovering
the main button, display only the sub-buttons. And when you hover the
sub-buttons then you can display the list.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
/* vertical threline nav bar */
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
width: 100%;
}
.dropbtnLi {
background-color: #9FACEC;
color: white;
font-size: 16px;
border: none;
}
.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;
position: relative;
}
/* 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;}
.dropdown-content-list {
display: none;
}
.dropdown-content-list:hover {
display: block !important;
}
.dropdown-content-li:hover .dropdown-content-list {
display: block;
position: absolute;
left: 100%;
top: 0;
background: #efefef;
}
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li class="dropdown-content-li">
<button class="dropbtn" value="Region">Country</button>
<div class="dropdown-content-list">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li class="dropdown-content-li">
<button class="dropbtn">Export</button>
<div class="dropdown-content-list">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Here is working code.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightblue;
}
/* vertical threline nav bar */
.navbar {
width: 50%;
display: block;
margin: 50px auto;
padding: 8px 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.navbar div {
height: 5px !important;
background: #fff;
margin: 7px 0px 7px 0px;
border-radius: 25px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.two {
width: 35px;
}
.three {
width: 50px;
}
.navbar:hover div {
width: 60px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropbtnLi {
background-color: #9FACEC;
color: white;
font-size: 16px;
border: none;
}
.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;}
<div class="dropdown">
<button class="dropbtn">
<div class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</button>
<div class="dropdown-content">
<ul>
<li>
<button class="dropbtn" value="Region">
<div class="dropdown-content">
<ul>
<li>Japan</li>
<li>South America</li>
<li>Europe</li>
</ul>
</div>
</li>
<li>
<button class="dropbtn">
<div class="dropdown-content">
<ul>
<li>Excel</li>
<li>CSV</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Or you can set direct child for hovering on parent li. like .dropdown:hover > .dropdown-content {display: block;}
I have been sitting for 4 hours now trying to make my nav display dropdown-links vetically but it continues to show them horizontally instead. I can´t figure out why this is happening or how to fix it.
I would appreciate it very much if some kind soul could tell me what I am doing wrong. I have a sneaking suspecion this is caused due to my settings for the nav (it changes size at a certain width) but I am not sure...
I have ripped my nav from my website and thrown everything into codepen, but even after several attempts to figure out where the problem starts - nothing! It displays "link1" right below and then just adds "link2" and "link3" to the right of it, instead of under
Please help?
Codepen: https://codepen.io/Pinchofginger/pen/BJJQgZ
If there are any oddities in the CSS it´s because I have a dropdown menu for mobile that display when you press an icon... it is not currently working either, but that a question for another time.
My HTML
<header class="mainheader">
<section id="baggrund">
<div id="mainlogo">
Sønderborg
<p> og omegns</p> Kattelaug<br />
<img class="vector" src="billeder/udklip.png" alt="Kattesilhuet"></div>
<nav>
<input type="checkbox" id="menu-checkbox" role="button" />
<label for="menu-checkbox" id="menu-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</label>
<div id="nav_wrap">
<ul id="menu">
<li>Forside</li>
<li>Adopter en kat</li>
<li>Tilløber katte</li>
<li> Kattens pleje</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">
Kontakt</a><div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul></div>
</nav>
</section>
</header>
MY CSS
/* small nav */
#media screen and (max-width: 61em) {
#menu li {
width: 20%;
}
#menu li a {
font-size: 0.9em;
width:100%;
color:red;}
#menu ul {width:100%;}
/*sidebar*/
body#index .sidemenu .sidebar1 {padding: 0 0 0 0;}
body#index #Mega {width: 96%; height:80px;}
body#index .sidemenu .sidebar1 h3 {font-size: 0.9em;}
}
/* stor nav*/
#media screen and (min-width: 61em) {
#menu li {
width: 20%;
}
#menu li a {
font-size: 1.2em;
width:100%;
color: #505050;
}} /*slut, stor*/
#menu li {
display: inline-block;
background: none;
padding: 5px 5px 5px 5px;
}
#menu li a {
text-transform: uppercase;
transition: all .5s ease;
text-decoration: none;
text-align: center;
line-height: 55px;
display: inline-block;}
.sidemenu .pleje {font-size: 0.9em; display:inline-block }
.sidemenu .pleje h3 {color: orange;}
#mainlogo {
display: block;
}
.mainheader {
width: 100%;
}
#bannerkat { display: none;}
#menu-button { display: none;}
#menu {
display: block;
border-radius: 0;
text-align: center;
position: relative;
}
/* Navigations menuen (links osv) */
#nav_wrap {
background: #f9f4ea;
width: 100%;
white-space: nowrap;
float: left;
height: 60px;
position: relative;
margin-top: 144px;
bottom: 0;
/* overflox:hidden; */
z-index: 9999;
opacity: .9;
box-shadow: 0px 1px 4px beige;
padding: 0;
}
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;
}
/* højde for billed-sektion*/
.mainheader section {
min-height: 204px;
}
#mainlogo {
font-size: 37px;
color: white;
border: 7px solid white;
display: inline-block;
padding: 10px;
position: absolute;
height: 123px;
/* hvid boks*/
line-height: 25px;
top: 202px;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000;
}
/* og omegns */
#mainlogo p {
font-size: 20px;
padding: 5px;
}
.vector {
width: 60px;
margin-left: -450px;
margin-top: -36px;
}
.mainheader {
margin-top: 10px;
}
Change line 42 in css: "menu li a" to Display: block instead of Display: inline-block:
#menu li a {
text-transform: uppercase;
transition: all .5s ease;
text-decoration: none;
text-align: center;
line-height: 55px;
display: block;
}
I want to create a dropdown nav menu with a modal like box appearing on hover.
Here in my example, Products heading needs to open 4 columns of subheadings that align themselves into a bootstrap like grid.
I am close to the result but I am facing a couple of hurdles: my hover does not seem to work. Also, my subheading appears only within the perimeter of my navbar - whereas I want it to appear a little below the navbar, with some padding.
I looked at these 2 examples but they did not help me:
stackoverflow reference 1
stackoverflow reference 2
Please find the code and guide me in the right direction:
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: grey;
}
.nav {
list-style: none;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}
.nav li:first-child {
margin-right: auto;
}
.nav li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 560px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 20;
border: 1px solid white;
padding: 80px;
height: 220px;
}
.dropdown-content ul {
display: block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.noshow {
display: none;
}
.dropdown-content:hover .noshow {
display: block
}
.subheading {
font-weight: 700;
}
<nav class="topnav">
<ul class="nav">
<li><a class="active" href="#title"> Title</a></li>
<li>
Products
<div class="dropdown-content arrow-up noshow">
<ul class="column large-3 each-column">
<li class="subheading">subheading</li>
<li>
subheading1
</li>
<li>
subheading2
</li>
<li>
subheading3
</li>
</ul>
</div>
</li>
<li>link2</li>
<li>link3</li>
<li><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
.left_menu {
float: left;
width: 50%;
}
.right_menu {
float: left;
width: 50%;
}
.right_menu ul {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
/* background-color: red;*/
/*color: white;*/
}
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;
}
</style>
</head>
<body>
<div class="left_menu">
<ul>
<li>Title</li>
</ul>
</div>
<div class="right_menu" style="float: left; width: 50%">
<ul>
<li class="dropdown">
Product
<div class="dropdown-content">
I have added a second CSS dropdown menu on my page and it appears on the left of the page. The first one has text center-aligned and everything works great. I added a second one for when an admin is logged in for admin operations.
The text is right-aligned in this menu and the dropdown appears on the left of the screen.
Here is a jsfiddle - https://jsfiddle.net/q0nsrdgo/
Html
<div id="loginbar">
<ul>
<li>Welcome Xenarious | </li><li>Logout |</li>
<li class="dropdown">Admin Controls
<div class="dropdown-content">
Add Customer
Edit Customer
Add Product
Update Product
</div>
|</li> <li>Orders</li>
</ul>
</div>
<header>
<img src="../common/techtitan-title.png">
</header>
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a href="products.html"
class="dropbtn">Products</a>
<div class="dropdown-content">
<!--Desktops-->
Notebooks
Tablets
Smartphones
</div>
</li>
<li>Services</li>
<li>About Us</li>
<li>Feedback</li>
</ul>
Css
#loginbar {
text-align: right;
background-color: #1D6000;
color: #FFD700;
font-size: 10pt;
z-index: 2;
overflow: auto;
width: 100%;
display: block;
margin: auto;
}
header {
background-color: #1D6000;
margin-bottom: 0;
text-align: center;
z-index: 1;
}
header img {
margin: auto;
text-align:center;
}
nav {
overflow: auto;
width: 100%;
display: block;
margin: auto;
margin-bottom: 20px;
background-color: #1D6000;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(5,5,5,0.5);
border-bottom: 3px ridge #FFD700;
font-size: 14pt;
}
nav ul, #loginbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1D6000;
}
nav li, #loginbar li {
/*float: left*/
display: inline;
margin: 0;
padding: 0;
}
li a, .dropbtn {
display: inline-block;
color: #FFD700;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #FFD700;
color: #1D6000;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1D6000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(5,5,5,0.5);
/*z-index: 1;*/
}
.dropdown-content a {
color: #FFD700;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #FFD700;
color: #1D6000;
}
.dropdown:hover .dropdown-content {
display: block;
}
Update your CSS as follows -
nav li, #loginbar li {
display: inline-block;
margin: 0;
padding: 0;
}
Since only your .dropdown class was set to inline-block, the dropdown wasn't being displayed as required.