I have a navigation bar with one element containing drop-down contents. The navigation bar code comes from the w3schools site. (http://www.w3schools.com/css/css_navbar.asp)
Below the menu I have added a SVG using plotly and it hides the drop-down contents.
Is there a way to make the navigation bar on the top (drop-down contents included) ?
(I have verified that by deleting the SVG, the drop-down contents isvisible)
Here is the sample code :
HTML
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div id="myDiv" class="plotly" ></div>
CSS
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);
}
.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;
}
https://jsfiddle.net/5qktcvwb/
I just added z-index property for the dropdown content and it's visible now.
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}
https://jsfiddle.net/5qktcvwb/4/
Related
I'm trying to do a navigation bar but not all the links stay at the same level, the drop down menu ones stay outside the navigation bar div and I can't align them.
Also, the container that has the drop down menu links isn't centered right bellow the drop down link.
I don't know how I can center it.
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 10px;
text-decoration: none;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.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;
}
<div class="topnav">
Link 1
Example link
<div class="dropdown">
Dropdown menu 1
<div class="dropdown-content">
Link 2
An example link
Link 3
</div>
</div>
<div class="dropdown">
Dropdown menu 2
<div class="dropdown-content">
Link 4
Link 5
An example link 2
</div>
</div>
</div>
Try adding this:
.dropdown a {
display:flex;
}
and your item element with a drop down should get aligned in the same space.
Update 1
You might need to set a fixed width on the submenu in order to keep it centred, like the following:
.dropdown-content {
left: -80px;
margin-left: 50%;
}
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 20px;
text-decoration: none;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown a {
display:flex;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: -80px; /* 160px/2 */
margin-left: 50%; /* 50% */
}
.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;
}
<div class="topnav">
Link 1
Example link
<div class="dropdown">
Dropdown menu 1
<div class="dropdown-content">
Link 2
An example link
Link 3
</div>
</div>
<div class="dropdown">
Dropdown menu 2
<div class="dropdown-content">
Link 4
Link 5
An example link 2
</div>
</div>
</div>
Just Add This Code In -> .topNav
align-items: center;
I want a Dropdown navbar. But the style sheet not work for the drop down element. The elements should be vertical and not horizontal for the sub menue.
Here you can see the code. It is from w3schools. The only change is that add a class name to ensure that this rules are only fot this navbar.
But the submenue ignore now my style sheet like block and color.
Any idea?
https://www.w3schools.com/code/tryit.asp?filename=G42IHSMIFQAA
Just deleted the display: inline-block; over the ul.topnav li a, .dropbtn, as you'd force the elements to be side-by-side, and rather, use display: block; so they can obey the float: left; parameter that you want.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a, .dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
ul.topnav 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;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
ul {
list-style-type: none;
margin: 0;
padding: 0;
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 class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
removing overflow:hidden; from ul in css style.
The Menu disappears.
I found the example on w3schools website, when i remove overflow:hidden from style in ul, the Menu is hidden.
Your menu didn't disappear, it is still there! You can inspect it like #Fran suggested or simply roll-over your mouse over it's area and you will see it getting highlighted. The behavior you are experiencing is because overflow: hidden; causes a new formatting to your block, that means that without it each element will follow it's own formatting and displays with the normal flow. Checkout this link for more details on block formatting context.
ul is a block level element. When the li are floated they take up no space and therefore the height of the ul is reduced to 0.
Now declaring overflow (anything but visible) on the ul creates a new block formatting context, which makes the ul contain its children and not be 0px height anymore.
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!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);
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;
}
</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">
Link 1
Link 2
Link 3
</div>
</div>
This is my first time trying to build a website from scratch, so my apologies if I've done everything wrong; I am open to any advice, though. My main issue right now is that the navigation bar is scrolling within itself instead of down in front of the background image. It used to look perfect until I added the floating/fixed attribute.
It's not a huge deal, but it would also be nice if the dropdown boxes were centered instead in line with the left side of the box. This is what I want it to look like: http://www.palousebicycle.org/ and here is the code for what I have now:
<header>
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
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: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
</style>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
I'm very appreciative of your time! Thank you for any response or suggestions.
EDIT: Also updated this demo to center the dropdown menus (positional and text) per your example, and made comments in the CSS so you can see where the changes were made.
Remove overflow: auto on #nav to let the dropdowns extend outside of the nav bar. Live demo:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
/* center dropdowns */
position: relative;
}
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: #333;
}
li.dropdown {
display: inline-block;
}
li.dropdown:hover .dropdown-content {
/* show dropdown */
display: block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* center dropdowns */
left: 50%;
transform: translateX(-50%);
/* hide dropdown */
display: none;
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
/* center dropdowns */
text-align: center;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
<nav align="center">
<ul id="nav">
<li>Home
</li>
<li class="dropdown"> Services
<div class="dropdown-content"> Memberships Repairs
</div>
<li>Our Work
</li>
<li class="dropdown"> About Us
<div class="dropdown-content"> Our Team Board of Directors
</div>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</nav>
Don't use overflow: auto property on #nav. This is responsible for internal scrolling. Instead give these additional styles:
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
}
.dropdown:hover > .dropdown-content {
display: block;
}
Have a look at the working snippet below:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
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: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
text-align: center;
}
.dropdown:hover > .dropdown-content {
display: block;
}
body {
margin: 0;
}
<header>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
</li>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
</li>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
Hope this helps!