Under each "Something" there should be two submenus next to each other.
My HTML so far.
<!DOCTYPE html>
<html>
<head>
<style>
#whatever div {
float:left;
width: 100%;
}
#test {
width:30%;
display:inline-block;
}
.dropdown {
position:relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
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>
<div id="whatever">
<span id="test">Something</span>
<div class="dropdown">
<button class="dropbtn">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<span id="test">Something</span>
<span id="test">Something</span>
</div>
</body>
</html>
So basically, as you can see, I need to add another submenu next ULL and I need to do the same under Something title.
(Last Edition)
Notes:
write 0 instead of 0px
open body tag after closed head tag
close div tag
set position for other ull buttons
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
#whatever div {
float: left;
width: 100%;
}
.test {
width: 30%;
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0 8px 16px 0 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>
<body>
<div id="whatever">
<span class="test">Something</span>
<div class="dropdown">
<button class="dropbtn">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 50px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<span class="test">Something</span>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 410px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 450px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<span class="test">Something</span>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 820px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" style="position: absolute;top: 26px;left: 860px;">ULL</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
Related
How would you align the items in the navbar? I tried using text-align: center but to no avail
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
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: red;
}
.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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="navbar">
<div class="dropdown" id="one">
<button class="dropbtn">A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Protip: Don't use floats. They're a dated and troublesome technique with very few legitimate modern uses.
Instead, use text alignment, automatic side margins, or flexbox.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox.
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex; /* <---------------------------------- HERE */
justify-content: center; /* <------------------------ HERE */
}
.navbar a {
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
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: red;
}
.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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="navbar">
<div class="dropdown" id="one">
<button class="dropbtn">A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Make a div named center
and make it an inline-block
.center{
display: inline-block;
}
Then cover all your drop downs with it like here bellow
<div class="center">
<div class="dropdown" id="one">
<button class="dropbtn">
A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">
B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">
C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
then add to your css text align center to .navbar
.navbar {
overflow: hidden;
background-color: #333;
text-align:center
}
now it will center the div class .center and your dropdown menu items wil always be centered
there are other ways to do it but this looks like the best if you dont declare the width of your div
Under here is the correct full code snippet
body {
font-family: Arial, Helvetica, sans-serif;
}
.center {
display: inline-block;
}
.navbar {
overflow: hidden;
background-color: #333;
text-align: center
}
.navbar a {
float: left;
font-size: 16px;
color: white;
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: red;
}
.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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="navbar">
<div class="center">
<div class="dropdown" id="one">
<button class="dropbtn">
A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">
B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">
C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
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>
My navbar is disappearing every time I try the position:fixed. I've gone through similar questions and I still can't figure it out. For that matter, the only position that is working is the position:static, all the other ones will mess up the dropdown bar or just won't show up. I'm basically just trying to make a sticky header.
.navbar {
overflow: hidden;
background-color: white;
padding: 20px 10px;
width:100%;
height: 74px;
}
/* Style the header links */
.navbar a {
float: left;
color: #9c9c9c;
text-align: center;
padding: 12px 20px;
text-decoration: none;
font-size: 20px;
line-height: 25px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.navbar a.logo {
font-size: 25px;
font-weight: bold;
}
.dropdown:hover .dropbtn {
border-bottom: 5px solid #002873;
}
/* Float the link section to the right */
.navbar-right {
float: right;
}
.navbar-icon {
float: right;
padding: 1px;
}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
text-align: left;
}
.navbar-right {
float: none;
}
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
background-color: inherit;
font-family: inherit;
margin: 0px;
padding: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
margin: 0px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
color: black;
border-bottom: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<div class="navbar">
<a href="home.html" class="title" style="font-weight:bolder; font-size:40px; color:#002873" > ExhibitLab </a>
<div class="navbar-right">
<div class="dropdown">
<button class="dropbtn"> About </button>
<div class="dropdown-content">
History
Timeline
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Publication </button>
<div class="dropdown-content">
Report
Additional Sources
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Research </button>
<div class="dropdown-content">
Thesis
Context
Global Implications
Mathematical Proof
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Model </button>
<div class="dropdown-content">
2D Model
SketchUp Model
Economic Model
Environmental Model
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Exhibit </button>
<div class="dropdown-content">
Preview
Location
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Media</button>
<div class="dropdown-content">
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Team</button>
<div class="dropdown-content">
Leading Professor
PhD Students
Grad Researchers
Undergrad Researchers
Additional Support
</div>
</div>
<div class = "navbar-icon">
mail_outline
<a href="#search" class="material-icons" style="font-size:20px" >search</a>
</div>
</div>
</div>
</header>
Bootstrap provides a class for fixing your navbar at the top of your screen 'navbar-fixed-top'.
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"></div></nav>
https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top
Try setting the position property in the header element instead the .navbar:
header {
position: fixed;
}
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>
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>