I am setting up a dropdown menu with div tags but when I have two dropdown boxes when I hover on each one of the boxes appear.
I tried Using ul li tags but that couldn't help.
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {}
.dropdown-content {
display: none;
position: absolute;
background-color: #EFEFEF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 50px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<div class="dropdown">
<a class="dropbtn">چرا ما ؟</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
<div class="dropdown">
<a class="dropbtn">تماس</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
</div>
</div>
I expect that when I hover on each one it's child dropdown content appeared but just one is appearing.
Your markup was incorrect. Also, your container dropdown need to have relative positioning.
Try this;
.dropbtn {
color: black;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #EFEFEF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 50px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
<div class="topnav">
<div class="dropdown">
<a class="dropbtn">چرا ما ؟</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
</div>
<div class="dropdown">
<a class="dropbtn">تماس</a>
<div class="dropdown-content">
لینک 1
لینک 2
لینک 3
</div>
</div>
</div>
Related
I am trying to resize dropdown menu, where I have text+picture. But the border is making part of the menu bigger, and that's the issue. I need to have text and under the text the picture of product. Is there any way to do it by css?
HTML
<div class="wrap">
<div class="header">
<img src="./images.png" class="image" alt="logo" />
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
Roofs<img src="https://insta-galery.w3spaces.com/strecha.jpg"/>
Link 2
Link 3
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
margin-top: 1px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.image{
display: flex;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
border-radius: 10px;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: flex;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
I changed this:
.dropdown:hover .dropdown-content {display: flex;}
display: flex to block. It solved my problem.
I have a dropdown menu of libraries. Each library may have sub-objects into them (they are in the attribute . Internal Elements) or not. When i hover over a library with instances it shows another menu to the right. The problem is that the first menu is changing sizes when this happens making it ugly and when i hover over the last library (without instances) it changes size at the same time and blocks the menu al together.
How it looks
The HTML:
<div class="row">
<div class="col-md-11">
<a href="#"
class="list-group-item clearfix"
(click)="onSelected()">
<div class="pull-left">
<h4 class="list-group-item-heading">{{picture.Name}}</h4>
</div>
</a>
<div *ngIf="dropdownflag">
<app-xml-element *ngFor="let component of components" [component]="component"></app-xml-element>
</div>
</div>
<div class="col-md-1.5">
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-plus"></span></button>
<div class="dropdown-content">
<div *ngFor="let librarie of libraries">
<div *ngIf="librarie.InternalElements.length>=1; else empty">
<div class="right">
<a class="dropright" >{{librarie.Name}}</a>
<div class="right-content">
<div *ngFor="let instance of librarie.InternalElements">
<a (click)="addElement(librarie,instance)">{{instance.Name}}</a>
</div>
</div>
</div>
</div>
<ng-template #empty>{{librarie.Name}}</ng-template>
</div>
</div>
</div>
<button role="button" (click)="dropdown()" *ngIf="picture.InternalElements.length>=1"><span class="caret"></span></button>
</div>
</div>
CSS:
/* Dropdown Button */
.dropbtn {
background-color: black;
color: white;
padding:5px;
font-size: 16px;
border: none;
}
/* 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: #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 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a: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: #3e8e41;}
/*Right menu container*/
.right {
position: relative;
display: inline-block;
}
/* content on 2nd menu*/
.right-content {
display: none;
position: relative;
left:160px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*ensure that a has the same format as previous class a*/
.right-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*hoverable a tag to show 2nd menu*/
.dropright {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the 2nd menu on hover right */
.right:hover .right-content {
display: block;
}
hello buddy the reason behind your dropdown not working properly is because you are using relative in your child div here is the code hopefully its good for you
/* Dropdown Button */
.dropbtn {
background-color: black;
color: white;
padding:5px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 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: #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: #3e8e41;}
/*Right menu container*/
.right {
position: relative;
display: inline-block;
}
/* content on 2nd menu*/
.right-content {
display: none;
position: absolute;
left: 152px;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 0;}
/*ensure that a has the same format as previous class a*/
.right-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*hoverable a tag to show 2nd menu*/
.dropright {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the 2nd menu on hover right */
.right:hover .right-content,.right:focus .right-content{
display: block;
}
<div class="container">
<div class="row">
<div class="col-md-11">
<a href="#" class="list-group-item clearfix" (click)="onSelected()">
<div class="pull-left">
<h4 class="list-group-item-heading">{{picture.Name}}</h4>
</div>
</a>
<div *ngIf="dropdownflag">
<app-xml-element *ngFor="let component of components" [component]="component"></app-xml-element>
</div>
</div>
<div class="col-md-1.5">
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-plus"></span></button>
<div class="dropdown-content">
<div *ngFor="let librarie of libraries">
<div *ngIf="librarie.InternalElements.length>=1; else empty">
<div class="right">
<a class="dropright">{{librarie.Name}}</a>
<div class="right-content">
<div *ngFor="let instance of librarie.InternalElements">
<a (click)="addElement(librarie,instance)">{{instance.Name}}</a>
</div>
</div>
</div>
</div>
<ng-template #empty>{{librarie.Name}}</ng-template>
</div>
</div>
</div>
<button role="button" (click)="dropdown()" *ngIf="picture.InternalElements.length>=1"><span
class="caret"></span></button>
</div>
</div>
</div>
I have a site I'm building which has a few dropdown menus. I'm sure this isn't being done in the most efficient way, but I'm curious why this is happening. I have the exact same CSS code for these dropdowns but one of them is nested under the main navigation and the other one is under a mobile menu (so like everything would be one under button).
The code works somewhat because when I've changed the display to be anything but none, the styling works fine and everything.. but for some reason, I just can't find out why the mobile menu dropdown isn't working but the main navbar one is.
Here's the code for the main nav bar dropdown:
#menu .dropdown {
top: -1px;
position: relative;
display: inline-block;
z-index: 9999;
margin-left: -6px;
margin-right: -7px;
}
#menu .dropbtn {
background-color: transparent;
color: white;
border: none;
font-family: 'chivolight';
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
}
#menu .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 10em;
box-shadow: relative rgba(0, 0, 0, 0.2);
margin-top: -0.2em;
margin-left: 0.35em;
top: 2.8em;
z-index: 99;
}
#menu .dropdown-content a {
background: white;
padding: 0.4em 1em;
text-decoration: none;
display: block;
}
#menu .dropdown-content a:hover {
background-color: #ddd;
}
#menu .dropdown:hover .dropdown-content {
display: block;
}
#menu .dropdown:hover .dropbtn {
background-color: transparent;
}
```
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
And the code for the mobile menu dropdown:
#menuicon .icon-dropbtn {
background-color: white;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#menuicon .icon-dropdown {
position: relative;
display: inline-block;
}
#menuicon .icon-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;
right: 0;
}
#menuicon .icon-dropbtn:hover {
opacity: 0.8;
transition: 0.3s;
}
#menuicon .icon-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuicon .icon-dropdown-content a:hover {
background-color: #f1f1f1
}
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
#menuicon .icon-dropdown:hover .icon-dropbtn {
background-color: #3e8e41;
}
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn" style="font-size: 0.8em;"><font color=black><i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
You have a misnamed hover selector in the mobile css:
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
should read:
#menuicon .icon-dropdown:hover .icon-dropdown-content {
display: block;
}
Select the mobile display classes:
#menuicon .icon-dropdown .icon-dropbtn{
//CSS for mobile display
}
or
Add same class to both buttons:
Like
Main:
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn someclass">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
Mobile:
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn someclass" style="font-size: 0.8em;"><font
color=black>
<i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
Now use CSS for the given class:
.someclass{
//Now both buttons have same class
//Add CSS
}
I modified the example from W3 schools a little bit to include a nested DropDown menu. I cannot figure out how to edit the css so that the drop down menus always appear to the right of the button being hovered over.
Ideally I want to drop down to look like this when hovering over Main button, and then Sub button2
[Main button] - [Sub button1]
[Sub button2] - [Sub button2 item1]
[Sub button3] - [Sub button2 item2]
- [Sub button2 item3]
.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;
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;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Just add left: 100%; top: 0; to your .dropdown-content. This will set to the defined position of the absolute element.
.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;
left: 100%;
top: 0;
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;
}
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
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