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.
Related
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 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>
This is my code right now im trying to change the background and font color when hovering over something within the dropdown menu i'm unsure where to place in the code.I'm unsure if i have to edit within the CSS or HTML code.
Here is my HTML
<body>
<div class="dropdown">
<button class="dropbtn"><b>Some Colleges at <br>MSU</b></button>
<div class="dropdown-content">
<center><b>College of Math and Sciences</b></center>
<center><b>Business School</b></center>
<a href="#"><center><b>College of Humanities and Social Sciences</b>
</center></a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><b>Departments in <br>CSAM</b></button>
<div class="dropdown-content">
<center><b>Biology</b></center>
<center><b>Computer Scince</b></center>
<center><b>Math</b></center>
<center><b>Chemistry</b></center>
<center><b>Earth and Environment Studies</b></center>
</div>
</div>
</body>
Here is my CSS
<style>
.dropdown-content a:hover {background-color: black; color:white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: red;}
.dropdown-content a {
color: white;
padding: 2px 10px;
text-decoration: none;
border: 1px solid blue;
display: block;
}
.dropbtn {
background-color: red;
color: cyan;
padding: 2px;
font-size: 16px;
border: 2px solid blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 120px;
z-index: 1;
}
</style>
You have the right code, it's just not visibly doing anything because the :hover colour is the same as the colour you've set in other classes.
This line: .dropdown-content a:hover {background-color: black; color:white;} is changing your colours on hover, just to the same thing. Change these colours and I think you'll find it achieves the effect you desire.
.dropdown-content a:hover { background-color: add your color; color: add your color;}
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