I want to make a dropdown menu in CSS ... I already have a menu with "fixed" position(this first menu has to be fixed and nothing else)
but when I try to design my dropdown menu, items in it don't go to the position I want and always align to the first menu...
plz, tell how to do it correctly....
#menu {
overflow: hidden;
position: fixed;
top: 0;
width: 50%;
margin-left: 25%;
background-color: #333;
color: #f2f2f2;
}
.menu-content {
float: left;
display: block;
text-decoration: none;
padding: 25px 20px;
font-size: 17px;
}
#products {
padding-top: 25px;
font-size: 22px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropdown-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center ;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<div id="menu">
<div class="dropdown">
<button id="products" class="dropdown-btn menu-content"> <i class="fa fa-bars"></i> products </button>
<div class="dropdown-content">
<a> speaker </a>
</div>
</div>
</div
</body>
this is the result I get:
enter image description here
Just remove
#menu {
overflow: hidden; <--remove!!
}
and add
.dropdown:hover .dropdown-content {
display: block;
margin-top: 65px; <- Add
}
If you use overflow:hidden on your #menu your dropdownlist will never show up, because your list will be limited by the external div, since it's nested in.
Also, use margin-top to add some distance between each item.
a way to fix it is to change the positioning from absolute to relative. also add a way to position it
.dropdown-content {
display: none;
position: absolute;<-- change to relative-->
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
Related
I am trying to create one link, Buying Tips, in my navigation menu as a drop down menu. I am running into a few problems and nothing I do seems to fix these issues.
For some reason when I scroll over Buying Tips, the first option of my drop down menu overlaps the navigation menu. I am not sure why this is happening and how to correct this.
I would like the drop down arrow to show but not sure how to code this in CSS.
I would like the navigation links to be equally spaced out and Buying Tips is all on one line. (please view image to see problem) I tried changing the width of the navbar and change the font sizes of navigation links but that does not help.
Printscreen of navigation issues on webpage
.navbar {
width: 100%;
background-color: black;
overflow: auto;
}
.navbar a {
float: left;
padding: 5px;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
width: 24%;
}
.navbar a:hover {
color: #FFA500
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .BuyTip {
float: left;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 200px;
}
.dropdown-content a {
float: none;
color: black;
display: block;
text-align: left;
font-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 480px) {
.navbar a {
float: none;
display: block;
width: 100%;
}
}
<div class="navbar">
Chade's Bicycle Company
<div class="dropdown">
<a class="BuyTip">Buying Tips</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Choosing The Correct Bike
Setting A Budget
Test-Ride Before Buying
Choosing The Correct Size
The Essential Accessories
</div>
</div>
Company Calendar
Contact Us
</div>
I've changed your code to achieve the desired result.
As for the questions you've asked:
Since you've made the element bearing the .dropdown class absolutely positioned it will stick to the top since it has no relative parent.
I've used a CSS border property to create an arrow. You can customize it as you wish. (even replace it with the caret class you've used originally, as long as you position it appropriately.)
You can control the spacing between the navigation links using CSS margin or padding properties. read-more about padding and margin.
.navbar {
width: 100%;
background-color: black;
overflow: auto;
font-size: 0;
}
.navbar li {
display: inline-block;
margin: 0 10px;
}
.navbar li a {
display: block;
padding: 5px;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
color: #FFA500
}
.dropdown>a {
position: relative;
padding-right: 10px;
}
.dropdown>a:after {
content: "";
display: block;
border-width: 6px;
border-style: solid;
border-right: 6px solid transparent;
border-color: red transparent transparent;
width: 0;
height: 0;
position: absolute;
right: -14px;
top: 14px;
}
.dropdown-content {
display: none;
position: absolute;
padding: 10px 0;
}
.navbar li .dropdown-content a {
color: black;
display: block;
text-align: left;
font-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.navbar li a {
font-size: 16px;
}
.dropdown>a:after {
border-width: 5px;
border-right: 5px solid transparent;
right: -10px;
top: 12px;
}
}
<div class="navbar">
<ul>
<li>Chade's Bicycle Company</li>
<li class="dropdown">
<a>Buying Tips</a>
<div class="dropdown-content">
Choosing The Correct Bike
Setting A Budget
Test-Ride Before Buying
Choosing The Correct Size
The Essential Accessories
</div>
</li>
<li>Company Calendar</li>
<li>Contact Us </li>
</ul>
</div>
I need to create menu like shown in this screenshot:
So as you can, the cursor hover opens large sub menu with two sub sections. Will be glad for any similar examples to my issues. Thanks for your answers!
Here is a very simple example to get you started. It needs more styling of course and more content, but this should give you all the tools to have a dropdown on hover in your menu
HTML:
<header>
<a href="/url">
Hover to see dropdown
</a>
<div>
<section></section>
<section></section>
</div>
</header>
CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50px;
}
header > a {
padding: 0 2em;
height: 50px;
display: grid;
place-content: center;
}
header > div {
display: hidden;
background-color: white;
}
a:hover + div {
display: inherit;
}
Something like this should work. It utilizes the :hover attribute in the navbar tab 'Dropdown' to reveal more content (in this case it'll be just some links).
HTML:
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
You can find more information on the W3School website for more!
I've been tampering around in W3 Schools and so far I've gotten the desired effect, but the navbar now expands with the dropdown menu. Is there a better way of doing this that I'm missing? Apologies in advance for formatting, and thank you for your time.
EDIT: To hopefully clarify a bit further: Example
Link to the W3schools thing: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED
The code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainNav {
background-color: #000;
padding:12px 10px 0px 0px;
float: right;
overflow: hidden;
}
.mainNav a {
color: #FFF;
float: left;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.mainNav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.mainNav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 500px) {
.logo {
max-width: 25%;
height: auto;
padding-top:10px;
margin-bottom:-50px;
display: block;
margin: auto;
}
.mainNav{
background-color: black;
width:100%;
font-size: 18px;
}
.mainNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.mainNav a.icon {
float: right;
display: block;
}
.mainNav.responsive {
position: relative;
}
.mainNav.responsive .icon {
position: absolute;
right: 0;
top: 15px;
}
.mainNav.responsive a {
float: none;
display: block;
text-align: center;
}
.mainNav.responsive .dropdown {
float: none;
}
.mainNav.responsive .dropdown-content {
position: relative;
}
.mainNav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div class="mainNav" id="navID">
Temp1
<div class="dropdown">
<button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Temp5
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("navID");
if (x.className === "mainNav") {
x.className += " responsive";
} else {
x.className = "mainNav";
}
}
</script>
</body>
</html>
The reason your entire nav is expanding is due to the positioning of the item. You have the .dropdown-content set to position: relative; By changing this to position: absolute; it will fix the first issue.
However, now to get the width the same as the parent, there are a few ways to do this. The easiest would be to simply set a width property to the dropdown-content as well, so it is always the same. The only issue will be if you have longer dropdown content areas so that the words are cut off. If this is the case, you can use min-width instead. I have calculated the width to be 97.45px; from the padding used on the <button> tag.
So all you will need to do is change your css of .dropdown-content to :
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 97.45px;
}
or, like I said min-width: 97.45px; . This will keep it the same width as the parent while allowing options to expand with larger content.
If this isn't what you're looking for, please comment reply to this and I'd be happy to help. There's a few different ways to accomplish this. Purely setting a width might just be the most simple. Btw, welcome to Stack Overflow
Hi I have made a web page with a navigation bar. There is mouse hover drop down menu on a navigation bar. I have take the code for this navigation bar from w3school web site. The code is
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
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;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div style="display:flex">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="dropdown-content">
List 4
List 5
List 6
</div>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Now the problem is that I want to add second column in front of first column in the drop down list.For this I add second div but all the stuff of the second div appears in place of first div and hides the content of first div. Please tell me that how can I place the second div in next to first div so that they appear parallel to each other.Please answer this question. I will be very thank full to you.
You can place it by wrapping the .dropdown-content div with a flexbox.
I have added .wrapper a class you can change it to whatever you like.
Here is the code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
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;
}
.wrapper {
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 .wrapper{
display: flex;
justify-content: center;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="wrapper">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="dropdown-content">
demo
demo
demo
</div>
</div>
</li>
</ul>
P.S. In the same way you can create multiple, side by side divs using flexbox. You can learn about flex here
So if the question is unclear, here a sketch of what I want. I couldn't find a similar question regarding this matter so that's why I'm asking.
I want it to be as simple as possible and css-only.
<div class="myselectbox">My Selectbox
<select class="myselect_class" id="myselect_id">
<option>OPT1</option>
<option>OPT2</option>
<option>OPT3</option>
<option>OPT4</option>
</select>
</div>
Thanks in advance
you just need to put in your display settings under css. As the default display is of block section.
so the CSS code change you need to do is as follow:
.myselect_class{
display: inline-block;
}
Try this:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 260px;
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: #f1f1f1float;}
.dropdown-content a {float: left;}
.dropdown:hover .dropdown-content {
display: inline;
}
a{
float: left;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown" style="float:left;">
<button class="dropbtn">Select</button>
<div class="dropdown-content" style="left:0;">
<div>
Link 1
Link 2
Link 3
</div>
</div>
</div>
you can't do it with <select>, you need to do like a custom dropdown