Been working on a navbar in html/css and the dropdown doesn't appear. I've been playing around with the code but nothing seems to work. Once I delete the display: none from the .dropdown-content class, it seems to appear...
Could anyone please take a look? I've been at it for hours and reading every thread on this issue, but cannot figure it out. Thx in advance!
Here are my css and html snippets:
body {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
background-size: cover;
}
#navdiv {
opacity: 0.70;
filter: (opacity=70;
)
}
#navdiv ul {
list-style-type: none;
width: 100%;
background: white;
line-height: 3rem;
float: right;
overflow: hidden;
}
#navdiv ul a {
text-decoration: none;
color: black;
padding: 2em;
}
#navdiv ul li {
float: right;
margin-right: 1em;
}
#logo {
float: left !important;
font-size: 2em;
margin-left: 1em;
}
#navdiv ul #logo:hover {
background: none;
}
#navdiv ul li a:hover,
dropdown:hover #dropbtn {
background: #B266FF;
transition: all 0.8s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
<body>
<div id="maindiv">
<div id="navdiv">
<ul>
<li id="logo">Potayto-Potatoh</li>
<li class="dropdown">About</li>
<li>Portfolio
<div class="dropdown-content">
work 1
work 2
work 3
</div>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
You need to Add dropdown for portfolio li not for about as it doesnt have dropdown-content
Demo
HTML:
<li class="dropdown">Portfolio
The dropdown-content div is not under dropdown div, the parent <li> element lacks the dropdown class specification.
Add the trigger class to the li element. Your CSS was also incorrect for the trigger, you wre refering to .dropdown (which is actually a class on the li for "about"!)
See https://jsfiddle.net/qxjbtot1/ for a working example.
body {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
background-size: cover;
}
#navdiv {
opacity: 0.70;
filter: (opacity=70;
)
}
#navdiv ul {
list-style-type: none;
width: 100%;
background: white;
line-height: 3rem;
float: right;
}
#navdiv ul a {
text-decoration: none;
color: black;
padding: 2em;
}
#navdiv ul li {
float: right;
margin-right: 1em;
}
#logo {
float: left !important;
font-size: 2em;
margin-left: 1em;
}
#navdiv ul #logo:hover {
background: none;
}
#navdiv ul li a:hover,
dropdown:hover #dropbtn {
background: #B266FF;
transition: all 0.8s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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-content a:hover {
background-color: #f1f1f1
}
li:hover div.dropdown-content {
display: block;
}
<body>
<div id="maindiv">
<div id="navdiv">
<ul>
<li id="logo">Potayto-Potatoh</li>
<li class="dropdown">About</li>
<li>Portfolio
<div class="dropdown-content">
work 1
work 2
work 3
</div>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
Related
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>
now I am finally got my navbar centered I have gotten a submenu in my navbar
now and I am trying to get it to work but all my links are just ruined :-/
so hope someone could explain to me why it doesnt want to work on the way I am doing it?
I want to keep the style of my navbar, and I am currently playing around with the css to get
my submenu working but it keeps ruining it :-/.
also when adding display:inline; to my .topnav ul it is not centered anymore grr ,
I have watched a video but even that would not work with my navbar.
I know I am doing something wrong but what ??
(can be a litle messy just cause i seperated the codes for testing sorry for that!)
/*Topnav*/
.topnav {
width: 100%;
opacity: 1;
background-color: rgba(255,255,255,0.6);
margin-bottom: 10px;
padding: 5px 0px 5px 0;
border-bottom: dotted #66A761;
border-top: dotted #66A761;
position:relative;
}
.topnav ul {
text-align: center;
}
.topnav ul li {
display: inline;
margin-left: 15px;
}
.topnav a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.topnav a:visited {
color: #FFF;
}
.topnav a:link {
color :#9F257D;
}
.topnav a:hover {
color: #66A761;
}
.topnav input {
float: right;
padding: 3px;
margin: 0 5px;
position: absolute;
right: 20px;
}
/*submenu testing*/
.topnav ul li ul li {
display: none;
}
.topnav ul li:hover ul li {
display: block;
}
<!--Topnav-->
<div class="topnav">
<nav>
<ul>
<li>recepten
<ul>
<li>lactosevrij</li>
<li>suikervrij</li>
<li>glutenvrij</li>
</ul>
</li>
<li>varianten
<ul>
<li>basis</li>
<li>standaard</li>
<li>luxe</li>
</ul>
</li>
<li>contact</li>
<li>over ons</li>
<input type="text" style="right:0" placeholder="Search..">
</ul>
</nav>
</div>
.topnav li {
position:relative;
}
.topnav li ul {
position: absolute;
top:25px;
left:0px;
background-color: #fff;
}
If the intention is that these sub menus work as dropdown you might want to set their positioning to absolute, but note that you have to make the wrapper element relative or else it might take the viewport as anchor.
It's not entirely clear what you mean but it sounds like you want a horizontal nav with dropdown sub-menu items.
E.G:
/*Topnav*/
.topnav {
width: 100%;
opacity: 1;
background-color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
padding: 5px 0px 5px 0;
border-bottom: dotted #66A761;
border-top: dotted #66A761;
position: relative;
}
.topnav ul {
text-align: center;
display: flex;
justify-content:space-between;
}
.topnav ul li {
display: inline-block;
margin: 0 7px;
padding: 0;
text-indent: 0;
position: relative;
}
.topnav ul li ul {
display: block;
position: absolute;
top: 100%;
left: -100px;
right: -100px;
margin: 0;
padding: 0;
}
.topnav ul li ul li {
display: block;
margin: 0;
padding: 0;
text-indent: 0;
}
.topnav a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.topnav a:visited {
color: #FFF;
}
.topnav a:link {
color: #9F257D;
}
.topnav a:hover {
color: #66A761;
}
.topnav input {
padding: 3px;
margin: 0 5px;
}
/*submenu testing*/
.topnav ul li ul li {
display: none;
}
.topnav ul li:hover ul li {
display: block;
}
<!--Topnav-->
<div class="topnav">
<nav>
<ul>
<li>recepten
<ul>
<li>lactosevrij</li>
<li>suikervrij</li>
<li>glutenvrij</li>
</ul>
</li>
<li>varianten
<ul>
<li>basis</li>
<li>standaard</li>
<li>luxe</li>
</ul>
</li>
<li>contact</li>
<li>over ons</li>
<input type="text" placeholder="Search..">
</ul>
</nav>
</div>
i changed the whole thing again and got it to react only got 2 problems with it
1 i can only get on the first link in the submenu, as soon as i slide down with my cursor it just closes before i hit my other link/links. (while in the snippet it works)
2 cant center my links in the middle under my logo on the page as it is , the spaces between it is perfect.
/*Topnav*/
.topnav {
width: 100%;
opacity: 1;
background-color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
padding: 5px 0px 5px 0;
border-bottom: dotted #66A761;
border-top: dotted #66A761;
position: relative;
}
.topnav ul {
display: inline;
text-align: left;
}
.topnav ul li {
display: inline-block;
margin: 0 7px;
padding: 0;
text-indent: 0;
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.topnav a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.topnav a:visited {
color: #FF00E0;
}
.topnav a:link {
color: #9F257D;
}
.topnav a:hover {
color: #66A761;
}
.topnav input {
float: right;
padding: 3px;
margin: 0 5px;
position: absolute;
right: 20px;
}
/*submenu testing*/
.topnav ul li ul {
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
padding: 5px 5px;
}
.topnav ul li:hover ul li {
display: block;
}
.topnav ul li ul li {
display: none;
}
<div class="topnav">
<nav>
<ul>
<li>recepten
<ul>
<li>lactosevrij</li>
<li>suikervrij</li>
<li>glutenvrij</li>
</ul>
</li>
<li>varianten
<ul>
<li>basis</li>
<li>standaard</li>
<li>luxe</li>
</ul>
</li>
<li>contact</li>
<li>over ons</li>
<input type="text" style="right:0" placeholder="Search..">
</ul>
</nav>
</div>
I have two pages of code. I want the first page's dropdown menu to look like the second page's dropdown menu. The second page is some code I copied and pasted from W3 Schools.
The problem is on the first page the drop down menu's width is the same as the navigation bar. I want to have a smaller width for the navigation bar and I can't figure out how why it is the same width of navigation bar.
First Page
ul {
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;
list-style-type: none;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
padding: 50px 100px;
text-decoration: none;
color: white;
}
li a:hover {
color: white;
background-color: #333;
}
.dropdown {
display: inline-block;
}
.dropcont {
display: none;
position: absolute;
background-color: #333 min-width:200px;
z-index: 1;
}
.dropcont a {
color: white;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
Second Page
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;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Here is the updated css :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
}
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:#333;
}
li.dropdown {
display: inline-block;
}
.dropcont {
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;
}
.dropcont a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropcont a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
.nav ul {
display: block;
list-style-type: none;
margin: 0;
position: absolute;
}
.nav li {
display: inline-block;
float: left;
}
.nav li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
display: block;
float: none;
}
.nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.nav ul > li:hover ul {
display: block;
visibility: visible;
}
.nav ul li:hover > ul {
display: block;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>
About
<ul>
<li>A1
</li>
<li>A2
</li>
</ul>
</li>
</ul>
</div>
sample code
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
Remove position:absolute; from your ul and add these minor changes
.nav{
width: 100%;
}
.nav ul {
display:block;
list-style-type:none;
margin: 0px auto;
width: 50%;
}
Here's the solved fiddle
Remove position:absolute;. It doesn't take any margin or padding values.
.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}
Here solved fiddle link
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: #19c589;
}
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;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
About
<div class="dropdown-content">
A1
A2
A3
</div>
</li>
<li>New</li>
</ul>
Use as the below:
.nav {
margin:0 auto;
}
please remove the ul position: absolute; style other styling left as it is. These are the additional changes you have to do.
.nav {
display: -webkit-box;
}
.nav ul {
margin: 0 auto;
}
I am new to CSS and I am making a navigation bar. Currently, my navigation bar is situated on the left and I would like to move the whole bar to the middle. How can I do that?
Below are the codes. Thanks in advance!
/* Navigation bar */
#navigation_bar {
list-style-type: none;
margin: 0;
position: fixed;
background-color: #333;
top: 0;
Left: 0;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
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);
}
.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;
}
.active {
background-color: #4CAF50;
}
<!--Navigation bar-->
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li>Promotion.</li>
<!--drop down menu-->
<li class="dropdown">Hot Products.
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li>Cold Products.</li>
<li>Snacks.</li>
<li>About Us.</li>
<li>Contact Us.</li>
</ul>
Update your #navigation_bar with
#navigation_bar {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
Here is the working Demo
#navigation_bar {
list-style-type: none;
margin: 0;
position: fixed;
background-color: #333;
top: 0;
Left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
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);
}
.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;
}
.active {
background-color: #4CAF50;
}
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li>Promotion.</li>
<!--drop down menu-->
<li class="dropdown">Hot Products.
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li>Cold Products.</li>
<li>Snacks.</li>
<li>About Us.</li>
<li>Contact Us.</li>
</ul>
By changing a bit of your CSS code you can easily do that as:
#navigation_bar {
text-align: center;
}
#navigation_bar li {
float: none;
display: inline-block;
vertical-align: top;
}
li .dropdown-content a:hover:not(.active) {
background: #d0d0d0; /* for altering the hover effect on submenus */
}
I have also created a JSFiddle.
Change navigation_bar css to :
#navigation_bar {
list-style-type: none;
margin: 0 auto;
position: fixed;
background-color: #333;
top: 0;
width: auto;
display: block;
float: left;
}
Try this
#navigation_bar{ text-align: center;} /*add align center */
li {display: inline; /* float:left; */} /* remove float left here and add display inline */