I'm trying to add a navbar with a dropdown for more pages when hovered over but it's not showing up when you hover. My code is below:
ul {
position: -webkit-sticky; /*code for safari only*/
position: sticky;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #3c86a6;
background-color: #AFD4E5;
border-radius: 5px;
}
li {
float: left;
border-radius: 10px;
}
li a, .dropbtn {
display: block;
color: #4a4a4a;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Oswald', sans-serif;
}
li a:hover:not(.active) {
background-color: #245164;
color: #AFD4E5;
font-family: 'Oswald', sans-serif;
}
li a.active {
color: aliceblue;
background-color: #245164;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #245164;
color: #AFD4E5;
}
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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<nav>
<ul>
<li>Home</li>
<li class="dropdown">
About Maptrix
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>WiseGuide</li>
<li>Finance</li>
<li>Documentation</li>
</ul>
</nav>
</body>
</html>
I feel like this should be an easy fix but I've spent ages on it and can't figure it out even after following lots of other posts so hopefully someone can spot my mistake!
Thanks!
Removed the overflow: hidden; from ul as suggested
Also added navbar class to <nav> and added a min-height
Then moved formatting of ul into navbar class.
Related
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
so I am pretty new to development and come across a problem, I think I am missing somthing but I can't tell. So I am building a nav bar and then a drop down menu. I believe that the li is in the ul so that why it is not coming out of it. So how could I fix this. If you know any website that would be good let me know thank you
Code:
https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111
Output:
https://codepen.io/Giannilmgc/full/JjrgZdr
To see what wrong keep your cursor over the to do tab and scroll down
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap");
/* Here is the body style where we change the background */
body {
background: linear-gradient(135deg, #36454f 0%, #ffdd3c 100%);
margin: 5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: white;
border-radius: 50px;
}
li {
float: left;
width: 16.667%;
transition-duration: 1s;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 1s;
}
li:hover {
background-color: black;
}
li a:hover {
background-color: #36454f;
color: white;
}
#homepageLink {
background-color: #cccccc;
}
.dropdown {
position: relative;
display: inline-block;
}
ul li ul {
display: none;
position: absolute;
background-color: #cccccc;
width: 20%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #36454f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<title> My Site </title>
<link rel="stylesheet" href="CSS/Homepage-Css.css" />
</head>
<body>
<body>
<div>
<ul>
<li>HomePage</li>
<li>Journal</li>
<li>Calander </li>
<li class="dropdown">To do
<ul class="dropdown-content">
<a herf="#">Latin</a>
<a herf="#">Scince</a>
<a herf="#">Ela</a>
</ul>
</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
<div class="time">
<span id="display_ct"></span>
</body>
<!-- Adding Script to the bottom ... Very Imporantent -->
<script src="Javascript/Homepage-Java.js"></script>
Thank you
In the dropdown class you have set the position in relative. Change it to absolute and your drop down menu will come out.
.dropdown {
position: absolute;
display: inline-block;
}
you put display none on the dropdown and try to show it when its hover on li.
but when the mouse go out from li the display:none on dropdown is return.
try to make it with after pseudo element and change the code from .dropdown { position: relative; display: inline-block; }
to:li:after.dropdown { position: relative; display: inline-block; }
it will work but not an ideal, improve it with css
If you want to create a dropdown menu with pure CSS there is this example from w3schools
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);
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>
<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>
Its is example on w3school.
I don't understand why if I add position:relative on ancestor class of dropDown-content.
Navbar does not display dropdown item and an element with position: absolute; is positioned relative to the nearest positioned ancestor, but without position:relative, is till not positioned body tag as ancestor?
Is there any way to solve this?
<!DOCTYPE html>
<html>
<head>
<style>
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;
position:relative;
}
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>
As per this post, the child element of a relative parent should have position: fixed
Add
.dropdown-content {
position: fixed;
}
That will work for you.
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;
position:relative;
}
.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;
position: fixed;
}
.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>
I want to see a dropdown menu as soon as I hover on the About button, but when I do, I can only see half of it. What am I doing wrong in my code?
Code:
.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);
}
body {
background-color: #1A1617
}
ul {
text-align: center;
list-style-type: 0px;
margin: 0px;
padding: 20px;
background-color: black;
overflow: hidden;
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li {
display: inline;
}
li a:hover {
background-color: red;
text-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><p>Check</p></div>
</div>
</ul>
</body>
</html>
Issue:
You are using overflow: hidden in the ul element, which doesn't allow its children (li, div) to exceed their parent's width and height and that's the reason why your dropdown menu is cut.
Corrected Code:
.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);
}
body {
background-color: #1A1617
}
ul {
text-align: center;
list-style-type: 0px;
margin: 0px;
padding: 20px;
background-color: black;
/*overflow: hidden; ← REMOVE THAT */
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li {
display: inline;
}
li a:hover {
background-color: red;
text-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><p>Check</p></div>
</div>
</ul>
</body>
</html>
I have completely redone this almost entirely from scratch; a few issues related to recommended web design standards were not introduced that should have been, I hope you can learn from my work here today:
The actual problem was linked to setting a relative element within the .dropdown class.
Here in the HTML5 Code I created:
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="UTF-8">
<title>Red And Black Navigation Bar</title>
<style>
body {
background-color: #1A1617;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-width: 320px;
}
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
border: 1px solid white;
}
li {
display: inline;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-size: large;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: center;
}
.dropdown:hover .dropdown-content {
display: block;
padding: 5px;
}
.goCenter {
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li><a class="achome.html">Home</a></li>
<li>News</li>
<li class="dropdown">
About
<div class="dropdown-content">
<p>The About Goes Here...</p>
</div>
</li>
</ul>
<p class="goCenter"></p>
</body>
</html>
I'm beginner to css & html and creating have been having trouble with creating a dropdown menu inside navigation bar . In the drop down menu "Product" it doesnt show the dropdown menu list when clicked. If anyone can point out the issue I would be really grateful. Below is the HTML code for the navigation bar:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown:hover .dropbtn {
display: block;
}
<ul class="Navigation">
<li>HOME
</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT
</li>
</ul>
You need to change your .dropbtn to .dropdown-content like this:
.dropdown:hover .dropdown-content{
display: block;
}
Here is a snippet of the code:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
background-color: #4c4747;
}
.dropdown:hover .dropdown-content{
display: block;
}
<ul class="Navigation">
<li>HOME</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT</li>
</ul>
you can try this one:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4C4747;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover
{
background-color:red;
}
.dropdown:hover .dropdown-content{
display: block;
}
DEMO HERE
You need to change your .dropbtn to .dropdown-content because then the button will be displayed (with display: block;) when you hover over .dropdown even though that is being displayed anyways. You want your content to be displayed when you hover over .dropdown. So change it to this-
.dropdown:hover .dropdown-content {display: block;}