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.
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 made an dropdown navbar like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: black;
display: block;
overflow: hidden;
font-size: 16px;
color: white;
padding: 14px 16px;
margin: auto;
max-width:100px;
}
.dropbtn:hover {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9c9c9;
min-width: 100px;
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;
}
.dropbtn:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropbtn">Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
but when I open this website in Safari on Iphone I cant use the dropdown it doesnt work. However if I make .dropbtn a button instead of div it works but now validator doesnt except button to have div and a as child. How can I change the code to make the website valid and can be used on Safari at the same time?
While buttons cannot have div or anchor elements as children, they can have span elements.
The following snippet passed W3C validation. Is it a hack?
Possibly, given button elements are not supposed to have interactive content descendants. See e.g. Is it semantically incorrect to put a <div> or <span> inside of a <button>? for discussion and references on this.
On the other hand it gets us round a problem on touchscreens with minimal alteration and minimal JS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: black;
display: block;
overflow: hidden;
font-size: 16px;
color: white;
padding: 14px 16px;
margin: auto;
max-width:100px;
}
.dropbtn:hover {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9c9c9;
min-width: 100px;
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;
}
.dropbtn:hover .dropdown-content, button span {
display: block;
}
</style>
</head>
<body>
<button class="dropbtn">Dropdown
<span class="dropdown-content">
<span onclick="window.location = 'Wherever';">Link 1</span>
<span onclick="" >Link 2</span>
<span onclick= "">Link 3</span>
</span>
</button>
<div id='id1'>id1</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Hi guys I'm an absolute beginner who just started learning html and was wondering why when I try to add a background image to my html file my dropdown menu suddenly becomes inoperative. These first and second pieces of code are my attempts at using a background image and a dropdown menu respectively. They both work fine for learning purposes but in the third piece of code when I combine them the dropdown button doesn't activate when hovered over. Anyone understand why?
BACKGROUND IMAGE CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i2.wp.com/brandikaran.com/wp-content/uploads/ld.png?ssl=1');
}
</style>
</head>
<body>
<h2>Testing</h2>
<p>Work this time pls</p>
</body>
</html>
DROPDOWN MENU CODE
!<!DOCTYPE html>
<html>
<head>
<<title>Dropdown Menus</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: red;
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 {
color: black;
padding: 12px 16 px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: pink;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: OrangeRed;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</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">
S Tier
A Tier
B Tier
</div>
</body>
</html>
COMBINING THEM
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i2.wp.com/brandikaran.com/wp-content/uploads/ld.png?ssl=1');
}
.dropbtn {
background-color: red;
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 {
color: black;
padding: 12px 16 px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: pink;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: OrangeRed;}
</style>
</head>
<body>
<h2>Testing</h2>
<p>Work this time pls</p>
<div class="Dropdown">
<button class="dropbtn">dropdown</button>
<div class="dropdown-content">
S Tier
A Tier
B Tier
</div>
</body>
</html>
Typo error here, change the first div class name to dropdown from Dropdown. It will work.
<div class="dropdown">
<button class="dropbtn">dropdown</button>
<div class="dropdown-content">
S Tier
A Tier
B Tier
</div>
</div>
And also the div container is not closed properly, but that shouldn't be a problem here, because the browser will take care of that automatically, but make sure you close all the tags properly, inproper closing may lead to unexcepted result. Thank you
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>
newbie coder here again, please have a look at my code, i watched a video online showing how to do a drop down menu, however; mine is all over the place when i hover over "Gallery".
I followed the tutorial well so it should work, however; i reckon the issue is with my CSS, but not sure what has caused this problem. Please advise.
http://aasunm01.wdd1516.bbkweb.org/Assignment%201/LPhotography.html
i do not see any drop down html code on your site anyway there is one
<!DOCTYPE html>
<html>
<head>
<style>
.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: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</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">
Link 1
Link 2
Link 3
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>