I am a beginner at html and I am trying to begin working on my online portfolio, I have gotten the nav bar set up and now I am trying to make a drop down menu from the nav bar. So far I have not been able to get the items to even go into the drop down menu, so I am thinking I do not have the container set up correctly. Thank you ahead of time!
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.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);
}
.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>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>
The element with the dropdown-content class is inside the element with the dropdown class, so what you are looking for is actually .dropdown:hover .dropdown-content
You current code (the + char) tells your browser to check for an adjacent sibling (and not a child element), which is not your case.
This is the update for your code:
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.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);
}
.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>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>
You're issue is with this CSS selector:
.dropdown:hover + .dropdown-content {
display: block;
}
It should be:
.dropdown:hover .dropdown-content {
display: block;
}
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.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);
}
.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>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</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.
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 am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
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;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
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;}
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>