Can someone help me with the top navbar. Im trying to make a dropdown menu that goes down 3 levels. I have 2 levels already and my third level is messing up. I tried doing it the same way as 2 level but it doesn't work. Thanks!
Here is JsBin https://jsbin.com/harukif/edit
Part of CSS:
li a:hover {
background-color: #c0b283;
color: white;
}
.dropdown:hover .dropbtn {
background-color: #c0b283;
}
li.dropdown {
display: inline-block;
text-align: left;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.content{
margin-top:75px;
}
From my experience:
<h3> tags should probably only wrap directly around text or maybe spans.
You have inline styling on your <img>, you can move that to topNav.css
Your content should be inside body, including <h1>
You should only put <li> inside <ul>, you can put other stuff inside <li>
Try not to use <a href="#"> to hold non-link content
Float is a totally valid way of doing things, but if you learn flexbox it's more logical, more powerful, produces neater results and responds better on all devices.
The trick to good CSS is clean HTML.
Try this: https://jsbin.com/wahegoc/2/edit?html,css,output
try to use for the third level a div that is absolute positioned with:
top: 0;
left: 100%;
This will cause that the third menu will appear on the right side of the current hovered element of the second menu.
Here how it looks like in your code - https://jsbin.com/cizoxagubu/1/edit?html,css,output
Here is your solution, please let me know if it works.
.topnav {
position: fixed;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f4f4f4;
z-index: 10;
}
.topmenu {
float: left;
font-family: 'Lato', sans-serif;
}
.topmenu a {
display: block;
color: #424242;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #c0b283;
color: white;
}
.dropdown:hover .dropbtn {
background-color: #c0b283;
}
li.dropdown {
display: inline-block;
text-align: left;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown-content .dropdown-content {
left: 100%;
position: absolute;
top: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content:hover {
background-color: #f1f1f1
}
.dropdown:hover > .dropdown-content {
display: block;
}
.dropdown > .dropdown-content a:hover + .dropdown-content {
display: block;
}
.content{
margin-top:75px;
}
Check the jsbin: https://jsbin.com/sefikaqiyo/edit?html,css,js,output
please hover: content and then hover country examples
Related
I want my navbar to go from no shadow to shadow on scroll—DONE (read my answer below). Now I want to add a fade transition effect to the shadow on scroll. Read "Updated" below.
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.topnav').addClass('shadow');
} else {
$('.topnav').removeClass('shadow');
}
});
});
.logo {
float: left;
padding-left: 20px;
padding-right: 15px;
padding-bottom: 30px;
padding-top: 20px;
width: 210px;
height: auto;
}
.topnav {
overflow: hidden;
background-color: white;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 1000;
width: 100%; !important;
position: fixed;
}
.topnav.shadow {
-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
}
.topnav a {
float: left;
display: block;
color: grey;
text-align: center;
padding-top: 30px;
padding-bottom: 0px;
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease-out;
}
.active, .nav-btn {
color: #1a1a1a;
}
#media (max-width: 800px) {
.resp-t-n {
padding-top: 60px;
}
.resp-b-n {
padding-bottom: 30px;
}
.logo {
width: 130px;
height: auto;
}
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: grey;
padding: 34px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
transition: color 0.3s ease-out;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1001;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover:not(.logo), .dropdown:hover .dropbtn {
color: #1a1a1a;
transition: color 0.5s ease;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child), .dropdown .dropbtn .resp-t-n .resp-b-n {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#active {
color: #1a1a1a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<img class="logo" src="[img path]">
<div class="resp-t-n">Home</div>
Elements
About
<div class="resp-b-n">Contact</div>
<i class="fal fa-bars"></i>
</div>
I'm attempting to learn how to code from scratch and anything I don't know, I usually just search up, but I genuinely can't find a solution that works, hence my first post.
I would really appreciate any help :)
Found an error in my console:
Uncaught ReferenceError: $ is not defined
at main.js:14
The code at line 14 is
$(document).ready(function() { — I fixed this issue
Updated
I'd now like to add a fade transition to the shadow on scroll. Would that be achieved with CSS or would it also have to be backed up using JS?
The issue was that <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> was underneath my main .js file. I just moved it above. Such a simple and stupid mistake!
For the second part of my question—the transition—I added transition: 1s; to .topnav
Thank you all very much for your time :)
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if ($(this).scrollTop() > 50) {
$('.topnav').addClass('shadow');
} else {
$('.topnav').removeClass('shadow');
}
});
});
body {
height: 200vh/* just for checking purpose */
}
.logo {
float: left;
padding-left: 20px;
padding-right: 15px;
padding-bottom: 30px;
padding-top: 20px;
width: 210px;
height: auto;
}
.topnav {
overflow: hidden;
background-color: white;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 1000;
width: 100%;
position: fixed;
}
.topnav.shadow {
-webkit-box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25);
box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25);
}
.topnav a {
float: left;
display: block;
color: grey;
text-align: center;
padding-top: 30px;
padding-bottom: 0px;
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease-out;
}
.active,
.nav-btn {
color: #1a1a1a;
}
#media (max-width: 800px) {
.resp-t-n {
padding-top: 60px;
}
.resp-b-n {
padding-bottom: 30px;
}
.logo {
width: 130px;
height: auto;
}
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: grey;
padding: 34px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
transition: color 0.3s ease-out;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1001;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover:not(.logo),
.dropdown:hover .dropbtn {
color: #1a1a1a;
transition: color 0.5s ease;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child),
.dropdown .dropbtn .resp-t-n .resp-b-n {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#active {
color: #1a1a1a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<img class="logo" src="[img path]">
<a href="/" id="active">
<div class="resp-t-n">Home</div>
</a>
Elements
About
<a href="contact.html">
<div class="resp-b-n">Contact</div>
</a>
<i class="fal fa-bars"></i>
</div>
Your page window has less content. If you have content more than 500px as you mentioned in your js, it will work.
when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* 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: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
I need to use javasript to close a dropdownmenu when click an link.
I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link like "down1" from the menu. But i have no idea how to do.
.dropdown {
position: relative;
display: inline-block;
width: 25%;
}
.gap {
text-align: center;
padding: 1em 0em;
background-color: #f47721;
margin-top: 6%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
border-radius: 2%;
}
.dropbt1 {
background-color: #f47721;
color: white;
padding: 1px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f47721;
/* min-width: 160px; */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
z-index: 1;
}
.dropdown-content1 a {
color: white;
padding: 8px 3px;
text-decoration: none;
display: block;
}
.dropdown-content1 a:hover {
background-color: #d86a1e
}
.dropdown:hover .dropdown-content1 {
display: block;
width: 100%;
}
<div class="dropdown">
<div class="gap">
<h3>Dropdownmenu</h3>
<button class="dropbt1"><h3>please choose</h3></button>
<div class="dropdown-content1">
down1
down2
down3
</div>
</div>
</div>
I need to use javasript to close a dropdownmenu when click an link.
I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link like "down1" from the menu. But i have no idea how to do.
I have done sample code hope it will help you.
$(document).ready(function(){
$('.dropdown-content1 a').on('click', function(){
$('.dropdown-content1').hide();
});
});
.dropdown {
position: relative;
display: inline-block;
width: 25%;
}
.gap {
text-align: center;
padding: 1em 0em;
background-color: #f47721;
margin-top: 6%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
border-radius: 2%;
}
.dropbt1 {
background-color: #f47721;
color: white;
padding: 1px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f47721;
/* min-width: 160px; */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
z-index: 1;
}
.dropdown-content1 a {
color: white;
padding: 8px 3px;
text-decoration: none;
display: block;
}
.dropdown-content1 a:hover {
background-color: #d86a1e
}
.dropdown:hover .dropdown-content1 {
display: block;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
<div class="gap">
<h3>Dropdownmenu</h3>
<button class="dropbt1"><h3>please choose</h3></button>
<div class="dropdown-content1">
down1
down2
down3
</div>
</div>
</div>
Here is a vanilla javascript solution, that will work repeatedly. Note that due to the size of the closed menu and the position of the first link, clicking on the top half of the first link will result in the menu immediately re-opening (because the mouse is still hovering over the menu)
document.querySelector('body').addEventListener('click', function(e) {
var clickedElement = e.target;
if (clickedElement.classList.contains('specialLink')) {
var menu = clickedElement.parentElement;
menu.style.display = 'none';
menu.classList.remove('touched');
// then remove the style after giving it a chance to close so hovering will reopen the menu
setTimeout(function() {
menu.style = '';
}, 200);
}
if (clickedElement.classList.contains('dropbt1')){
var menu = clickedElement.nextSibling.nextSibling;
if(!menu.classList.contains('touched'))
menu.classList.add('touched');
else
menu.classList.remove('touched');
}
});
.dropdown {
position: relative;
display: inline-block;
width: 25%;
}
.gap {
text-align: center;
padding: 1em 0em;
background-color: #f47721;
margin-top: 6%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
border-radius: 2%;
}
.dropbt1 {
background-color: #f47721;
color: white;
padding: 1px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f47721;
/* min-width: 160px; */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
z-index: 1;
}
.dropdown-content1 a {
color: white;
padding: 8px 3px;
text-decoration: none;
display: block;
}
.dropdown-content1 a:hover {
background-color: #d86a1e
}
.dropdown:hover .dropdown-content1, .dropdown-content1.touched {
display: block;
width: 100%;
}
.dropbt1{
padding:0.5em;
font-size:1em;
}
<div class="dropdown">
<div class="gap">
<h3>Dropdownmenu</h3>
<button class="dropbt1">please choose</button>
<div class="dropdown-content1">
down1
down2
down3
</div>
</div>
</div>
I have just a small dropdown menu and I would like to be able to make it so the drop down menu disappears when I click on one of the options (not the button, but just the menu you get when you hover over the button). I've been looking around for solutions to this, but I can't seem to find any answers.
function changeType(str) {
document.getElementById("selectType").innerHTML = str;
document.getElementById("selectType").value = str;
}
.dropbtn {
background-color: #360363;
margin-bottom: 0px;
min-width: 120px;
color: white;
padding: 0px;
font-size: 0.7em;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
margin-top: 0px;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 6px 16px;
text-decoration: none;
display: block;
margin-top: 0px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #4B0082;
transition: 0.5s;
}
<div class="dropdown">
<button id="selectType" class="dropbtn" value="Choose Color">Choose Color</button>
<div class="dropdown-content">
<a onclick="changeType('Red')" href="#">Red</a>
<a onclick="changeType('Green')" href="#">Green</a>
</div>
</div>
You can achieve this via CSS:
.dropdown:active .dropdown-content,
.dropdown:focus .dropdown-content {
display: none;
}
Snippet:
function changeType(str) {
document.getElementById("selectType").innerHTML = str;
document.getElementById("selectType").value = str;
}
.dropbtn {
background-color: #360363;
margin-bottom: 0px;
min-width: 120px;
color: white;
padding: 0px;
font-size: 0.7em;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
margin-top: 0px;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 6px 16px;
text-decoration: none;
display: block;
margin-top: 0px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #4B0082;
transition: 0.5s;
}
.dropdown:active .dropdown-content,
.dropdown:focus .dropdown-content {
display: none;
}
<div class="dropdown">
<button id="selectType" class="dropbtn" value="Choose Color">Choose Color</button>
<div class="dropdown-content">
<a onclick="changeType('Red')" href="#">Red</a>
<a onclick="changeType('Green')" href="#">Green</a>
</div>
I used the example of w3
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: center;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
and then I tried to put div into center horizontally.
I tried a lot such as
{ margin: 0 auto }
but nothing changed...
Is there any way to center ?
Thanks
If you want to center a certain element using margin: 0 auto, you should define both width and display:block
.centercontent{
width: 500px;
display:block;
margin: 0 auto;
}