Need help to display the text box to the left side of Track. This is what it should look like.
.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: #94CB32;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.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;
}
<div class="dropdown">
Track
<div class="dropdown-content">
<input type="text" placeholder="OrderID" ID="Button1" Text="Track">
<input type="button" value="Track" />
</div>
</div>
it's simple, use display: flex for the dropcontent
check the updated snippet
.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: #94CB32;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.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: flex;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<html>
<div class="dropdown">
Track
<div class="dropdown-content">
<input type="text" placeholder="OrderID" ID="Button1" Text="Track">
<input type="button" value="Track" />
</div>
</div>
</html>
Add the following to .dropdown-content:
top: 0;
right: calc( 100% + 5px );
Note that when you hover one element to show another you have to be careful about the placement. If there is a gap between the parent element and the child element you'll no longer be hovering the parent element and the child will disappear. To fix this you need both elements to touch one another. You can do this by making sure they touch (butted up next to each other or overlap on another), add padding (which might not be ideal if using a background color) or use a pseudo element. I did the latter so I added this selector:
.dropdown-content:before {
content: '';
display: block;
position: absolute;
width: 5px;
top: 0;
right: -5px;
bottom: 0;
}
This solution does what you have show in your image but I'm not sure how you want (are going to) handle the space to the left of the .dropdown. I reduced the width of body so you can see it fly out.
body {
width: 40%;
margin: 25px auto;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Fills gap between Track and flyout so it will continue to show when moving mouse. */
.dropdown-content:before {
content: '';
display: block;
position: absolute;
width: 5px;
top: 0;
right: -5px;
bottom: 0;
}
.dropdown-content {
display: none;
position: absolute;
top: 0;
right: calc( 100% + 5px );
background-color: #94CB32;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.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;
}
<div class="dropdown">
Track
<div class="dropdown-content">
<input type="text" placeholder="OrderID" ID="Button1" Text="Track">
<input type="button" value="Track" />
</div>
</div>
Related
I want to align my dropdown menu a tags to the center but can't figure out how to do that, only started with CSS recently.
It would display the dropdown dropdownbtn items in the dropdown-content with the links aligned to the center.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.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: #ddd;
color: black;
}
.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;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
Use a transform on the dropdown.
left: 50%;
transform: translatex(-50%);
Also I switched from float to flexbox for simplicity and a more modern approach.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a {
font-size: 16px;
color: #f2f2f2;
padding: 14px;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.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;
left: 50%;
transform: translatex(-50%);
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
When you move the cursor over the "Catalog" button, sub-items drop down. However, when you hover over the "Clothes" sub-item, the pop-up menu to the right does not appear and in general something goes wrong. Why?
.dropdown {
position: absolute;
/* margin: -60px 0 0 200px; */
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: greenyellow;
padding: 15px;
border-radius: 5px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 30px;
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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropright-content {
position: absolute;
top: 0;
left: 0px;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropright-content a {
background-color: #f1f1f1;
}
.dropright-content a:hover {
background-color: #ddd;
}
.dropright:hover .dropright-content {
display: block;
}
<div class="dropdown">
<div class="dropbtn">≡ Catalog</div>
<div class="dropdown-content">Clothes
<div class="dropright-content">
Men's clothing
Women's clothing
</div>
Electronics
Books
</div>
</div>
Firstly, your drop-right content can't have left: 0. This places it directly over the first menu level.
Then, your hover selector was off. It needs to be something like .dropdown-content a:hover+.dropright-content, because there's a sibling relationship.
That's a problem, though, since once you leave the hovered anchor the sibling hides. So we need to restructure to create a child relationship. Something like this:
.dropdown {
position: absolute;
/* margin: -60px 0 0 200px; */
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: greenyellow;
padding: 15px;
border-radius: 5px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 30px;
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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropright-content {
position: absolute;
top: 0;
left: 100%;
color: black;
padding: 12px 16px;
text-decoration: none;
display: none;
}
.dropright-content a {
background-color: #f1f1f1;
}
.dropright-content a:hover {
background-color: #ddd;
}
.inner-dropdown:hover .dropright-content {
display: block;
}
<div class="dropdown">
<div class="dropbtn">≡ Каталог</div>
<div class="dropdown-content">
<div class="inner-dropdown">
Одежда
<div class="dropright-content">
Мужская одежда
Женская одежда
</div>
</div>
Электроника
Книги
</div>
</div>
CSS dropdowns have been used and discussed for ages. You might look into one of the many good examples to see how you can simplify your structure and CSS. Ideally you don't have separate style rules for the outer and inner drop panels.
I'm new to HTML/CSS and I'm trying to add a dropdown button to my nav bar, currently the the dropdown content is appearing under the button(as intended) however it is stuck inside the nav bar and will not overlay below.
I would like the text in my navbar to remain central and the dropdown content to be visible below the button but also overlay outside of the navbar.
What do i need to change in order for this to be possible?
I have tried adding a z-index to elements to no avail and i have also played around with positioning of all the elements.
body {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
width: 100%;
position: none;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
right: 0;
}
.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;
}
<nav class="navbar">
Home
Popular Items
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Products
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Contact Us
FAQ
</nav>
The problem is not in the z-index value, the thing is that in the container .navbar you set the overflow to hidden, so whenever the elements that are inside this container go beyond the limits of your container, this elements will be effectively hidden. Only by removing the property overflow: hidden; in the .navbar definition class your hover effect will work.
body {
text-align: center;
}
.navbar {
background-color: #333;
width: 100%;
position: none;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
right: 0;
}
.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;
}
<nav class="navbar">
Home
Popular Items
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Products</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Contact Us
FAQ
</nav>
You code had a few problems. The value hidden in the overflow property hid your dropdown menu when it's height exceeded that of the dropdown class. Also you need to specify a top value that pushes the dropdown-content right beneath the dropbtn button. And to center the dropdown menu horizontally you need to add a right and left value of 0. I've changed your CSS code a little bit. Hope this solves your issue.
body {
text-align: center;
}
.navbar {
/* overflow: hidden; */
background-color: #333;
width: 100%;
position: none;
height: 60px;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 40px;
right: 0;
left: 0;
}
.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;
}
Just remove Overflow: hidden in .navbar
or add this:
.navbar {
overflow: visible !important;
}
In my rails project I use a dropdown button with dropdown content that opens under my dropdown button. Everything works fine. Here is the code:
.dropdown {
padding: 10px 20px 0px 20px;
position: relative;
display: inline-block;
}
.dropbtn {
background-color: none;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
font-size: 12pt;
}
.dropdown-content a {
color: #355264 !important;
padding: 12px 16px;
text-decoration: none !important;
display: block;
}
.dropdown-content a:hover {
background-color: #ffb465 !important;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: none;
}
<div class="dropdown">
<div class="dropbtn"><%= image_tag("imprint.png") %></div>
<div class="dropdown-content">
<%= link_to I18n.t('basic.sign_out'), destroy_user_session_path, :method => :delete %>
<%= link_to I18n.t('basic.friends'), fb_user_friends_path, :remote => true %>
</div>
</div>
Is it possible to position the dropdown content right to the dropdown button and how?
Thanks for help
Add right: 20px; to your .dropdown-content. It should be equal to .dropdown's right padding (20px in your case).
.dropdown {
padding: 10px 20px 0px 20px;
position: relative;
display: inline-block;
margin: 10px 200px;
}
.dropbtn {
background-color: none;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
font-size: 12pt;
right: 20px; /* added */
}
.dropdown-content a {
color: #355264 !important;
padding: 12px 16px;
text-decoration: none !important;
display: block;
}
.dropdown-content a:hover {
background-color: #ffb465 !important;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: none;
}
<div class="dropdown">
<div class="dropbtn">Toggle</div>
<div class="dropdown-content">
dropdown-content
</div>
</div>
If you want to make the drop down content right side just use text-align:right; to .dropdown-content class like below
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
font-size: 12pt;
text-align:right;
}
Thanks you for your help. Finally I added:
right: -145px;
top: 0px;
to my dropdown-content. That's it. Now it works.
I've made a top bar that contains drop-down MENU button on the right side. But this drop-down content has exactly the same size (width) as my MENU button. Finally - my goal is to make this drop-down content as wide as the top bar is.
My HTML code looks like this:
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
And more important part - CSS:
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
If you want to see how does it look like HERE is jsFiddle link.
Don't you have any idea how to solve my problem?
Just move position: relative from .dropdown to #top-bar.
By doing this, .dropdown-content will calculate width according to the nearest element with position: relative i.e #top-bar.
#top-bar{
position: relative;
height:40px;
float: left;
width: 100%;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
}
.dropdown-content {
display: none;
left: 0;
top: 100%;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
I think that's what you want
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
display: block;
float: right;
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
width: 100%;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
https://jsfiddle.net/69uts0dr/3/