At https://www.w3schools.com/css/css_dropdowns.asp
It puts
position: relative;
position: absolute;
for
.dropdown
.dropdown-content
respectively.
I removed them as follows and seems it still works, are they important?
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
If you don't add it, it will shift the next elements.
.position-relative{
position:relative;
}
.position-absolute{
position:absolute;
}
.dropdown {
margin-left:30px;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown position-relative">
<span>Relative Position</span>
<div class="dropdown-content position-absolute">
<p>Absolute Position</p>
</div>
</div>
<div>No shift</div>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<div>Hi</div>
By using position:absolute inside a position:relative element, you can set the position of the inner div depending on the outer one.
.outer{
width:80px;
height:80px;
background-color:orange;
}
.inner{
position:absolute;
top:10px;
right:10px;
width:30px;
height:30px;
}
.position-relative{
position:relative;
}
.blue{
background-color:blue;
}
.red{
background-color:red;
}
<div class="outer position-relative">
<div class="inner red"></div>
</div>
<br>
<div class="outer">
<div class="inner blue"></div>
</div>
If you had something under dropdown with position: relative and position: absolute the dropdown will appear on top of it. If you remove it then the dropdown will appear in between and push the content after itself to the bottom.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute; /*try commenting this line*/
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<p>Under dropdown<p>
</body>
</html>
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'm using masonry layout to get two columns with different height elements in each of them. In the first column I have a dropdown element, with 3 entries. When I hover over the dropdown, the content is displayed in the second column, not if the first one. I think this is because of the masonry layout I'm using. How can I update the code to make the dropdown display the content in the first column?
Here is the code:
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
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:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.item {
float: right;
width: 100%;
}
<body>
<div class="masonry-wrapper">
<div class="item">
<h1> Left item </h1>
</div>
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="item">
<h1> Right item </h1>
</div>
</div>
</body>
May not be exactly what you want, but it does what you're asking for. Removed "position: absolute;" and changed "display: block;" to "display: inline-block;".
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
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:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.right-item {
float: right;
width: 100%;
}
<body>
<div class="masonry-wrapper">
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="right-item">
<h1> Right item </h1>
</div>
</div>
</body>
I am trying to design a dropdown menu where the child item of the menu changes color(green) but the item doesn't extend to cover all the box size horizontally leaving the remaining part in its original color.
Thank you!
HTML Doc
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Home</title>
</head>
<body>
<div id="container">
<header>
<img src="jarir.svg">
<div id="search"><input></div>
</header>
<nav>
<div class="dropdown">
<a>All Catgories</a>
<div class="dropdown_content">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
</div>
</div> <!-- dropdown-->
<a>Shop by Brand</a> <a>Online Exclusive</a>
</nav>
</div> <!-- container-->
</body>
</html>
CSS
#container{}
img{
width: 130px;
height: 45px;
}
#search, #search input{
display: inline-block;
position: absolute;
margin: auto;
margin: 5px 10px;
width:500px;
max-width: 500px;
min-width: 200px;
background-color: lightgray;
}
nav a{
margin-right: 30px;
padding: 10px;
float:left;
border-bottom: 0.7mm solid red;
}
nav a:hover{
border-bottom: 1.2mm solid #3A44F8;
}
.dropdown{
position: relative;
display: inline-block;
float: left;
}<!-- -->
.dropdown:hover .dropdown_content {
display: block;
border-bottom: 0px;
}
.dropdown_content a{border-bottom: 0px;}
.dropdown:hover{
background-color:Blue;
color: red;
}
.dropdown_content a:hover{
background-color:green;
color: yellow;
border: 0px;
display: block;
}
.dropdown_content {
display: none;
position:absolute;
top: 35px;
background-color:#f7f7f7;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
list-style-type: none;
color: black;
}
You can try this code. There is some css changes.
Like .dropdown_content a{border-bottom: 0px;display: block;width: 100%;box-sizing: border-box;}
#container{}
img{
width: 130px;
height: 45px;
}
#search, #search input{
display: inline-block;
position: absolute;
margin: auto;
margin: 5px 10px;
width:500px;
max-width: 500px;
min-width: 200px;
background-color: lightgray;
}
nav a{
margin-right: 30px;
padding: 10px;
float:left;
border-bottom: 0.7mm solid red;
}
nav a:hover{
border-bottom: 1.2mm solid #3A44F8;
}
.dropdown{
position: relative;
display: inline-block;
float: left;
}<!-- -->
.dropdown:hover .dropdown_content {
display: block;
border-bottom: 0px;
}
.dropdown_content a{border-bottom: 0px;display: block;width: 100%;box-sizing: border-box;}
.dropdown:hover{
background-color:Blue;
color: red;
}
.dropdown_content a:hover{
background-color:green;
color: yellow;
border: 0px;
}
.dropdown_content {
display: none;
position:absolute;
top: 35px;
background-color:#f7f7f7;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
list-style-type: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="container">
<header>
<img src="jarir.svg" />
<div id="search"><input /></div>
</header>
<nav>
<div class="dropdown">
<a>All Catgories</a>
<div class="dropdown_content">
<a>Link1</a> <a>Link2</a> <a>Link3</a>
</div>
</div>
<!-- dropdown -->
<a>Shop by Brand</a> <a>Online Exclusive</a>
</nav>
</div>
<!-- container -->
</body>
</html>
I am making a item container which have many item boxes in there, when I hover the item, it will have a drop-down table for item-informations.
The problem here is that I when I set the container to overflow:auto (so that I can store as many boxes as I want) then when I hover at the box, the drop down will be cut-off in a very ridiculous way. What i want is that the dropDown will be all visible, you guys have any trick to make this?
.parent{
overflow-y:auto;
background-color: blue;
width: 500px;
height: 100px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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 a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="parent">
<div class="dropdown">
<button class="dropbtn">Item1</button>
<div class="dropdown-content">
<p>Info 1</p>
<p>Info 2</p>
<p>Info 3</p>
</div>
</div>
</div>
</body>
</html>
Try this:
.parent{
overflow-y:auto;
background-color: blue;
width: 500px;
height: 100px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropDownContainer {
display:block;
width: 100px;
height: 70px;
float: left;
position: static;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="parent">
<div class="dropDownContainer">
<div class="dropdown">
<button class="dropbtn">Item1</button>
<div class="dropdown-content">
<p>Info 1</p>
<p>Info 2</p>
<p>Info 3</p>
</div>
</div>
</div>
</div>
</body>
</html>
Try This
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.parent{
background-color: blue;
width: 500px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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 a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="parent">
<div class="dropdown">
<button class="dropbtn">Item1</button>
<div class="dropdown-content">
<p>Info 1</p>
<p>Info 2</p>
<p>Info 3</p>
</div>
</div>
</div>
</body>
</html>
You need to change overflow-y:auto to overflow-y:visible on .parent div or else you can remove that property from .parent div.
I made a dropdown menu in css and I can't add space between the elements in the dropdown. They collapse.
There is the code: jsfiddle
There is the CSS part. I tried different things to fix it.
*
{
margin:0px;
}
html,body
{
height:100%;
}
.wrapper
{
height:100%;
min-height:100%;
height:auto !important;
margin:0 auto -50px;
}
.footer,.push
{
height:50px;
}
.footer
{
background-color:lightblue;
}
.footer center
{
vertical-align:middle;
}
.header
{
margin-top:10px;
height:150px;
}
#meniu li
{
padding:5px;
border:1px solid black;
border-radius:10px;
display:inline;
}
#meniu
{
margin-top:5px;
background-color:lightblue;
width:100%;
height:50px;
}
#meniu a
{
text-decoration:none;
}
.dropdown-content {
display: none;
position: absolute;
width:100%;
margin:0px;
}
.dropdown-content ul
{
height:100%;
width:100%;
position:relative;
list-style-type:none;
margin-top:20px;
left:-25%;
}
.dropdown-content li
{
position:relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
There is the the HTML:
<body>
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown"><li>FISIERELE MELE<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div></li>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>
I made a dropdown menu in css and I can't add space between the elements in the dropdown. They collapse.
They collapse because you have made them as inline elements. I think you meant inline-block, otherwise padding/margin would not render properly.
The correct code should be:
#meniu li {
⋮
display: inline-block; /* make `li` as inline-blocks */
margin-bottom: 10px; /* add spacing */
}
You also have some HTML syntax errors (extra li), please run it through a validator. My final result is:
* { margin: 0px; }
html, body { height: 100%; }
.wrapper {
height: 100%;
min-height: 100%;
height: auto !important;
margin: 0 auto -50px;
}
.footer, .push { height: 50px; }
.footer { background-color: lightblue; text-align: center; }
.header { margin-top: 10px; height: 150px; }
#meniu li {
padding: 5px;
border: 1px solid black;
border-radius: 10px;
display: inline-block;
margin-bottom: 10px;
}
#meniu {
margin-top: 5px;
background-color: lightblue;
width: 100%;
height: 50px;
}
#meniu a {
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
margin: 0px;
}
.dropdown-content ul {
height: 100%;
width: 100%;
position: relative;
list-style-type: none;
margin-top: 20px;
left: -25%;
}
.dropdown-content li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown">
<li>FISIERELE MELE
<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015
</div>
jsFiddle: https://jsfiddle.net/azizn/snL1gwsm/
Hope i understood your question correctly...
i made some drop-down bar for you.
you can add elements as you wants, take a look on the html file and the css it will help you understand what is going on.
take a look :)
.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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color:lightblue}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You had an error in your html
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown">
<li>FISIERELE MELE
<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
</li>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>
https://jsfiddle.net/ggtpufuw/1/
After fixing the html you have to make your list display as inline-block and margin them as you like.
#meniu li
{
padding:5px;
border:1px solid black;
border-radius:10px;
display:inline-block;
margin-top:10px;
}