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>
Related
I want the links to cover area from top to bottom of navigation bar what is happening on all the links except the Dropdown one.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="This is a example site for nav design">
<title>
Navbar
</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
background-color: #f1f5f9;
flex-wrap: wrap;
width: 100%;
box-shadow: 0rem .15rem .25rem #94a3b8;
}
.nav {
margin-left:10%;
margin-right:10%;
}
.nav a {
text-decoration: none;
font-size: 18px;
color: #1e293b;
font-weight: 600;
padding: 1rem;
}
nav ul {
display: flex;
justify-content: right;
list-style-type: none;
margin: 0;
}
nav ul li {
padding: 1rem;
}
.nav a:hover, .nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.nav .dropdown {
overflow: hidden;
margin: 0;
}
.nav .dropdown .dropbtn {
padding: 0;
margin: 0;
font-size: 18px;
font-weight: 600;
border: none;
outline: none;
color: #1e293b;
background-color: inherit;
font-family: inherit;
}
.dropdown-items {
display: none;
position: absolute;
background-color: #f1f5f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nopadding {
padding: 0;
}
.nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.dropdown-items a {
float: none;
color: #6b7280;
padding: 1rem 1rem 1rem 1rem;
text-decoration: none;
display: block;
text-align: left;
box-shadow: 0px .15rem .15rem #e2e8f0;
}
.dropdown-items a:hover {
color: #1e293b;
background-color: #f8fafc;
}
.dropdown:hover .dropdown-items {
display: block;
}
</style>
<!--
<script type="text/javascript" src="https://livejs.com/live.js"></script>
-->
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>Home</li>
<li>Content</li>
<li>
<div class="dropdown">
<button class="dropbtn">Social</button>
<div class="dropdown-items">
Instagram
Twitter
Facebook
Youtube
</div>
</div>
</li>
<li>About us</li>
</ul>
</div>
</nav>
</body>
</html>
It is working as intended if I change the third list tag and place is just before the Social link.
<nav>
<div class="nav">
<ul>
<li>Home</li>
<li>Content</li>
<div class="dropdown">
<button class="dropbtn">
<li>Social</li>
</button>
<div class="dropdown-items">
Instagram
Twitter
Facebook
Youtube
</div>
</div>
<li>About us</li>
</ul>
</div>
</nav>
It's working but I am not sure if it is a good way like adding other tags before list tag for a list item and when I run lighthouse test it also says list tag requires unordered list tag and cannot be used alone.
So I want to know, If there is a way to get the desired functionality of the lator Html code through Css.
After some changes I got the results I wanted.
New code:
* {
margin: 0;
padding: 0;
}
nav {
background-color: #f1f5f9;
flex-wrap: wrap;
width: 100%;
box-shadow: 0rem .15rem .25rem #94a3b8;
}
.nav {
margin-left:15%;
margin-right:15%;
}
.nav a {
text-decoration: none;
font-size: 18px;
color: #1e293b;
font-weight: 600;
padding: 1rem;
}
nav ul {
display: flex;
align-items: center; /* Aligned items in center of navbar */
justify-content: right;
list-style-type: none;
}
/* Removed nav ul li padding of 1rem */
.nav a:hover, .nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.nav .dropdown {
overflow: hidden;
margin: 0;
}
.nav .dropdown .dropbtn {
padding: 1rem; /* Added padding to dropdown button */
margin: 0;
font-size: 18px;
font-weight: 600;
border: none;
outline: none;
color: #1e293b;
background-color: inherit;
font-family: inherit;
}
.dropdown-items {
display: none;
position: absolute;
background-color: #f1f5f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nopadding {
padding: 0;
}
.nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.dropdown-items a {
float: none;
color: #6b7280;
padding: 1rem 1rem 1rem 1rem;
text-decoration: none;
display: block;
text-align: left;
box-shadow: 0px .15rem .15rem #e2e8f0;
}
.dropdown-items a:hover {
color: #1e293b;
background-color: #f8fafc;
}
.dropdown:hover .dropdown-items {
display: block;
}
<body>
<nav>
<div class="nav">
<ul>
<li>Home</li>
<li>Content</li>
<li>
<div class="dropdown">
<button class="dropbtn">Social</button>
<div class="dropdown-items">
Instagram
Twitter
Facebook
Youtube
</div>
</div>
</li>
<li>About us</li>
</ul>
</div>
</nav>
</body>
Removed padding from unordered list items.
Added align-items center to unordered list to center the items on navbar.
Added 1rem padding to dropbtn class.
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.
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>
I want to create a dropdown nav menu with a modal like box appearing on hover.
Here in my example, Products heading needs to open 4 columns of subheadings that align themselves into a bootstrap like grid.
I am close to the result but I am facing a couple of hurdles: my hover does not seem to work. Also, my subheading appears only within the perimeter of my navbar - whereas I want it to appear a little below the navbar, with some padding.
I looked at these 2 examples but they did not help me:
stackoverflow reference 1
stackoverflow reference 2
Please find the code and guide me in the right direction:
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: grey;
}
.nav {
list-style: none;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}
.nav li:first-child {
margin-right: auto;
}
.nav li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 560px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 20;
border: 1px solid white;
padding: 80px;
height: 220px;
}
.dropdown-content ul {
display: block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.noshow {
display: none;
}
.dropdown-content:hover .noshow {
display: block
}
.subheading {
font-weight: 700;
}
<nav class="topnav">
<ul class="nav">
<li><a class="active" href="#title"> Title</a></li>
<li>
Products
<div class="dropdown-content arrow-up noshow">
<ul class="column large-3 each-column">
<li class="subheading">subheading</li>
<li>
subheading1
</li>
<li>
subheading2
</li>
<li>
subheading3
</li>
</ul>
</div>
</li>
<li>link2</li>
<li>link3</li>
<li><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
.left_menu {
float: left;
width: 50%;
}
.right_menu {
float: left;
width: 50%;
}
.right_menu ul {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
/* background-color: red;*/
/*color: white;*/
}
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;
}
</style>
</head>
<body>
<div class="left_menu">
<ul>
<li>Title</li>
</ul>
</div>
<div class="right_menu" style="float: left; width: 50%">
<ul>
<li class="dropdown">
Product
<div class="dropdown-content">
I would like to change the color of the active page,
Html code:
<html>
<head>
<title>Anwar Othmane - Portfolio</title>
<link rel="stylesheet" href="Zwa9.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / media="screen" type="text/css" title="Design" href="design.css">
</head>
<script>
$(function() {
$('#mainnav li a').click(function() {
$('#mainnav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
</script>
<body>
<div id="nav-bar" class="nav-bar">
<img src="Img/.png"></img>
<ul class="mainnav" id="mainnav">
<li>PORTFOLIO</li>
<li>ABOUT ME</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Css code:
#nav-bar {
height:100%;
width: 20%;
color: #070707;
background-color: #efefef;
font-size: 14px;
box-shadow: -6px 0px 10px rgba(0, 0, 0, 0.5);
}
#nav-bar img {
margin-left: 10%;
margin-bottom: 10px;
margin-top: 20px;
vertical-align: middle;
}
#nav-bar a {
text-decoration: none;
color: #070707;
}
#nav-bar a:active {
color: red;
}
#mainnav > .active > a {
color: red;
}
#nav-bar ul.mainnav {
list-style-type: none;
margin: 0;
margin-bottom: 100px;
padding: 0;
}
#nav-bar ul.mainnav li {
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom: 1px dashed #070707;
}
I would like for example the background (of the active navigation item) to be #4B77BE ... do you have an idea? maybe JavaScript trick? or just CSS?
Many thanks!
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
lenght: 500;
}
li {
float: left;
}
li a {
display: block;
color: #000005;
padding: 14px 16px;
text-decoration: none;
}
a:hover; a:active; {
background-color: #00015b;
}
.active {
background-color:#00015b;
}
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}
.show {display:block;}