I'm writing a homepage and I need a dropbox menu, so I found a demo for dropbox menu from Googling. But the codes did not work properly even if I applied the demo. Its layout is quite ridiculous.
The #menubar is parallel with #site_content but I intended to place #memubar that contains dropbox menu vertically followed by #site_content. Please refer below source code for detail.
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em trebuchet ms, sans-serif;
background: #EEE;
color: #5D5D5D;
}
#site_content h1 {
font: normal 140%'century gothic', arial, sans-serif;
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
color: #747474;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul li {
float: left;
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
#main,
#logo,
#menubar,
#site_content,
#footer {
margin-left: auto;
margin-right: auto;
}
#main {
padding-bottom: 20px;
}
#header {
background: transparent;
height: 170px;
}
#menubar {
height: 24px;
width: 900px;
}
#site_content {
width: 858px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 10px 20px 20px 20px;
background: #fcfcfa;
border: 15px solid #FFF;
}
#site_content h1 a {
text-decoration: none;
}
#site_content.article {
font-size: 100%
}
.sidebar {
float: right;
width: 190px;
padding: 0 15px 20px 15px;
}
.sidebar ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
.sidebar li {
list-style: none;
padding: 0 0 7px 0;
}
.sidebar li a,
.sidebar li a:hover {
padding: 0 0 0 25px;
display: block;
background: transparent url(link.png) no-repeat left center;
}
.sidebar li a.selected {
color: #444;
text-decoration: none;
}
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
list-style: none;
/** Remove list bullets */
width: 100%;
/** Set the width to 100% of it's parent */
padding: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}
<!DOCTYPE HTML>
<html>
<head>
<title>main</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style/style.css?ver=1" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1><span class="logo_colour">Homepage</span></h1>
<h2>Test</h2>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected">Menu1
</li>
<li> Menu2▾
<ul class="dropdown">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</li>
<li>Memu3
</li>
<li>Menu4
</li>
</ul>
</div>
</div>
<div id="site_content">
<h1>Welcome to Homepage<br/> We welcome you. <br/><br/><br/></h1>
</div>
<div id="footer">
<section align="left" class="visitor bg_white">
<b>Address:</b> Address
<br />
<b>Phone:</b> Phone
<br/>
<b>Email:</b> test#test.com
<br/>
<br/>
</section>
<p class="day">Copyright © 2016 CAS Lab. All rights reserved.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>
</html>
If you want nav and content side-by-side, the easiest option is to utilize flexbox. I also removed the 900px width you had set on the menu and cleaned up the dropdown positioning.
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em trebuchet ms, sans-serif;
background: #EEE;
color: #5D5D5D;
}
#site_content h1 {
font: normal 140%'century gothic', arial, sans-serif;
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
color: #747474;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul li {
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
right: -125px;
top: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
#main,
#logo,
#menubar,
#site_content,
#footer {
margin-left: auto;
margin-right: auto;
}
#main {
padding-bottom: 20px;
display: flex;
flex-direction: row;
}
#header {
background: transparent;
}
#menubar {
height: 24px;
}
#site_content {
width: 858px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 10px 20px 20px 20px;
background: #fcfcfa;
border: 15px solid #FFF;
}
#site_content h1 a {
text-decoration: none;
}
#site_content.article {
font-size: 100%
}
.sidebar {
float: right;
width: 190px;
padding: 0 15px 20px 15px;
}
.sidebar ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
.sidebar li {
list-style: none;
padding: 0 0 7px 0;
}
.sidebar li a,
.sidebar li a:hover {
padding: 0 0 0 25px;
display: block;
background: transparent url(link.png) no-repeat left center;
}
.sidebar li a.selected {
color: #444;
text-decoration: none;
}
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
list-style: none;
/** Remove list bullets */
width: 100%;
/** Set the width to 100% of it's parent */
padding: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}
<!DOCTYPE HTML>
<html>
<head>
<title>main</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style/style.css?ver=1" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1><span class="logo_colour">Homepage</span></h1>
<h2>Test</h2>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected">Menu1
</li>
<li> Menu2▾
<ul class="dropdown">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</li>
<li>Memu3
</li>
<li>Menu4
</li>
</ul>
</div>
</div>
<div id="site_content">
<h1>Welcome to Homepage<br/> We welcome you. <br/><br/><br/></h1>
</div>
<div id="footer">
<section align="left" class="visitor bg_white">
<b>Address:</b> Address
<br />
<b>Phone:</b> Phone
<br/>
<b>Email:</b> test#test.com
<br/>
<br/>
</section>
<p class="day">Copyright © 2016 CAS Lab. All rights reserved.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>
</html>
Related
This is the html and css code I use. When I look on a mobile device or when I shrink my screen the countdown disappears, but the text not. I have added the other part of the css. Now I added all the css of the page, so the upper part is from my navbar I used in my html. I added the JS aswell. I hope someone knows how to fix this problem. Thank you in advance! I added the whole html aswell. I hope you know a solution for all the problems!
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 29, 2021",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Bestel nu je vuurwerk!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
nav{
background: #151515;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000,
0 0 10px #0a0a0a;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid red;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
text-align:center;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
background-color:red;
color: white;
border-radius:5px;
}
.icon{
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #1b1b1b;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
}
.container li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/countdown.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/xicon" href="images/logo-klein.png">
<title>Knalhuis Ochten</title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<img src="images/logo-groot.png" height="80" />
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-2" class="show">Assortiment</label>
Assortiment
<input type="checkbox" id="btn-2">
<ul>
<li>Knalvuurwerk</li>
<li>Siervuurwerk</li>
<li>Kindervuurwerk</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Dagen tot vuurwerkverkoop:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>dagen</li>
<li><span id="hours"></span>uren</li>
<li><span id="minutes"></span>minuten</li>
<li><span id="seconds"></span>seconden</li>
</ul>
</div>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
The reason is because in your media query you have this:
.show + a, ul{
display: none;
}
You are hiding all ul elements. Remove that and you'll see your numbers. You may need to keep the .show + a, but the ul is what is causing it to be hidden.
.show + a, nav > ul{
display: none;
}
This makes sure not every ul is targeted, but just the top level one in your menu.
EDIT In the comment you mention about your nav menu not collapsing. You can do this (or something similar since I don't have all the code):
EDIT 2 You are seeing the ::before font awesome elements before your numbers because all the spans are getting the .cancel class added. The following CSS will fix that.
#countdown li span.cancel::before {
display: none;
}
(function() {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let birthday = "Dec 29, 2021",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Bestel nu je vuurwerk!";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
nav {
background: #151515;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
line-height: 70px;
padding-left: 60px;
}
nav ul {
float: right;
margin-right: 4px;
list-style: none;
position: relative;
}
nav ul li {
float: left;
display: inline-block;
background: #151515;
margin: 5 5px;
}
nav ul li a {
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: white;
border-radius: 5px;
box-shadow: 0 0 5px #000000, 0 0 10px #0a0a0a;
}
nav ul ul li a:hover {
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
border-top: 3px solid red;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul {
border-top: none;
}
nav ul li:hover>ul {
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li {
position: relative;
margin: 0px -20px;
width: 175px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
text-align: center;
}
nav ul ul li a {
line-height: 50px;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 150px;
}
.show,
.icon,
input {
display: none;
}
.fa-plus {
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul {
margin-right: 0px;
float: left;
}
nav .logo {
padding-left: 30px;
width: 100%;
}
nav ul li,
nav ul ul li {
display: block;
width: 100%;
}
nav ul li a:hover {
box-shadow: none;
}
.show {
display: block;
color: white;
font-size: 18px;
padding: 0 15px;
line-height: 70px;
cursor: pointer;
}
.show+a,
nav>ul {
display: none;
}
.show:hover {
background-color: red;
color: white;
border-radius: 5px;
}
.icon {
display: block;
color: white;
position: absolute;
top: 25;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul {
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a {
padding-left: 40px;
}
nav ul ul ul a {
padding-left: 80px;
}
nav ul ul ul li {
position: static;
}
[id^=btn]:checked+ul {
display: block;
}
nav ul ul li {
border-bottom: 0px;
}
span.cancel:before {
content: '\f00d';
}
#countdown li span.cancel::before {
display: none;
}
}
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #1b1b1b;
}
.container {
color: yellow;
margin: 0 auto;
text-align: center;
}
.container li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
.container li span {
display: block;
font-size: 4.5rem;
}
.message {
font-size: 4rem;
}
#content {
display: none;
padding: 1rem;
}
#media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/countdown.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/xicon" href="images/logo-klein.png">
<title>Knalhuis Ochten</title>
</head>
<body>
<nav>
<div class="logo">
<div id="myMenu">
<div class="logo-navbar">
<nav>
<img src="images/logo-groot.png" height="80" />
</nav>
</div>
</div>
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-2" class="show">Assortiment</label>
Assortiment
<input type="checkbox" id="btn-2">
<ul>
<li>Knalvuurwerk</li>
<li>Siervuurwerk</li>
<li>Kindervuurwerk</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<h1 id="headline">Dagen tot vuurwerkverkoop:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>dagen</li>
<li><span id="hours"></span>uren</li>
<li><span id="minutes"></span>minuten</li>
<li><span id="seconds"></span>seconden</li>
</ul>
</div>
</div>
<script>
$('.icon').click(function() {
$('span').toggleClass("cancel");
});
</script>
</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 am using CSS to make drop-down menu. When I resized the page, the drop-down menu didn't work. It didn't do anything when I click on the menu. Also I would like to know that when I resize my page, the About menu from the nav bar does not show after resizing. I do not know how to fix the size when I resize the page.
This is my first time using CSS and HTML. I would love to learn from you guys here.
This is my HTML code
<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link href="css/pj2.css" rel="stylesheet" type"text/css">
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset= "UTF-8">
<title>KeeNok</title>
</head>
<body>
<div class="wrap">
<!--Responsive menu-->
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Events
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Past Events
Future Events
</div>
</div>
About
☰
</div>
<!--Menu-->
<div id="main_menu">
<div class="logo_area">
<img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\graphics\KeeNokLogo.jpg" alt="logo">
</div>
<div class="inner_main_menu">
<ul id="menu">
<li>Events
<ul>
<li>Past Events</li>
<li>Future Events</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
<!--Popup Photos-->
<div class="thumbs">
<div id="Mian Kham" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Mian Kham.png" alt="Mian Kham"></div>
<div id="Gai Tod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Gai Tod.png" alt="Gai Tod"></div>
<div id="Tom Khao Pod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Tom Khao Pod.png" alt="Tom Khao Pod"></div>
</div>
<footer></footer>
</div>
</body
This is my CSS code
body {
margin: auto;
background: rgba(255, 255, 255, 0.945);
font-family: 'Ubuntu', sans-serif;
overflow: auto;
height:100%;
}
.wrap {
position: fixed;
top: 0;
left: 0;
border: 20px solid #9fd7fd;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.inner_main_menu {
margin: 0 auto;
width: 1300px;
}
.inner_main_menu ul{
margin: 60px;
padding: 0;
list-style: none;
text-align: right;
padding-top: 30px;
z-index: 1;
}
.inner_main_menu ul li{
float: none;
display: inline-block;
position: relative;
}
.inner_main_menu ul li:nth-child(1){
float: left;
}
.inner_main_menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
}
.inner_main_menu ul li a:hover {
color: #eb3332;
}
.inner_main_menu ul li ul {
position: absolute;
top: 40px;
left: 0;
width: 200px;
padding: 0;
display: none;
margin: 0;
}
.inner_main_menu ul li:hover ul {
display: block;
}
.inner_main_menu ul li ul li{
float: left;
}
.inner_main_menu ul li ul li a{
font-size: 15px;
}
#main_menu {
width: 100%;
position: relative;
}
.logo_area img{
max-width: 300px;
position: absolute;
left: 50%;
top: 0;
content: " ";
margin-left: -150px;
text-align: center;
}
#main_menu:after {
content: "";
display: table;
clear: both;
}
.thumbs {
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.thumbs img{
max-width: 300px;
}
.topnav {
background-color:#555d61;
overflow: hidden;
}
.topnav a {
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.active {
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
padding: 14px 16px;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#555d61;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropbtn {
background-color: #aaadad;
color: black;
}
.dropdown-content a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropdown-content {
display:block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
This is how my page look like before resizing
This is my page looks like after resizing
I see in your CSS that there's a comment which reads:
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon
I think you are missing the JavaScript you need to add the class to your navigation.
It will look something like this:
const icon = document.querySelector(".icon")
const nav = document.querySelector(".topnav")
icon.onclick = function() {
nav.classList.toggle('responsive');
}
I'm having problems where my dropdown menu made with CSS and HTML will force a linebreak and the dropdown menu will glitch out. You can see this problem by running my code.
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Home
</li>
<li>
About Us <i class="fa fa-angle-down" aria-hidden="true"></i>
</li>
<li>
Bolivia
</li>
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
Whenever you hover over "products" the code glitches out and forces a line break. I want to make it so that it doesnt affect the flow of the document. I've already tried to set the float to left and that didn't work.
Thank you!
Instead of position: static; on .dropdown I would go with position:absolute
You will need to iron out some padding and margin of your ul and li tags for proper fit
add position:relative to .dropdown li
See snippet below (I took out some menu items to ensure proper inspection of your product sub-menu where the issue lies)
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
padding: 0;
}
.dropdown li {
margin: 0px;
list-style-type: none;
position: relative;
left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 40px;
padding-left: 40px;
background: #f2f2f2;
}
.main-nav {
position: relative;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Hind:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="copla.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Copla</title>
</head>
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
</body>
</html>
I'm creating a website, and it so far has the navigation bar under "construction." I want it so when I hover over it, the whole nav ul li background to change color, not just the background behind the text. I have this:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav>
<ul>
<li class="active">Home</li>
<li>Contact Us</li>
<li>Sharepoint</li>
<li>Employees</li>
</ul>
</nav>
</header>
<section class="body">
</body>
</html>
and this for the CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8
}
/****HEADER STUFF****/
header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}
nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}
nav a:hover
{
background: #00248F;
}
nav ul
{
width: 40%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul li
{
display: inline;
padding: 8%;
}
nav ul li a:hover
{
text-decoration: none;
}
nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}
nav ul li a:visited
{
text-decoration: none;
}
How can I do it?
Try this: http://jsfiddle.net/3BBe2/2/. I have modified your code around.
New CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8
}
/****HEADER STUFF****/
header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}
nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}
nav ul a{
padding:3px 3px;
}
/* nav li a:hover
{
background: #00248F;
} */
nav ul
{
width: 60%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul li
{
display: inline;
padding: 8%;
padding:5px 5px;
padding:10px 12px 10px;
}
nav ul li:hover
{
background: #00248F;
}
nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}
nav ul li a:visited
{
text-decoration: none;
}
You can't change .nav ul li by hovering over a, because they are abscending. A working method to do it is with Javascript.
I've changed the width of .nav because it was unlogic, header was 200% width and with that you can't center .nav proper.
But anyways, this will work for you:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script>
function change() {
document.getElementById("ul").style.backgroundColor="#bbb";
document.getElementById('nav').style.backgroundColor="#ccc";
document.getElementById('li').style.backgroundColor="#333";
document.getElementById('li2').style.backgroundColor="#333";
document.getElementById('li3').style.backgroundColor="#333";
document.getElementById('li4').style.backgroundColor="#333";
}
function changeback() {
document.getElementById('nav').style.backgroundColor="#888";
document.getElementById("ul").style.backgroundColor="#0033CC";
document.getElementById('li').style.backgroundColor="#f00";
document.getElementById('li2').style.backgroundColor="#f00";
document.getElementById('li3').style.backgroundColor="#f00";
document.getElementById('li4').style.backgroundColor="#f00";
}
</script>
<header>
<div id="nav">
<ul id="ul">
<li id="li">Home</li>
<li id="li2">Contact Us</li>
<li id="li3">Sharepoint</li>
<li id="li4">Employees</li>
</ul>
</div>
</header>
<section class="body">
</body>
</html>
The CSS:
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8;
}
/****HEADER STUFF****/
header {
position: fixed;
height: 10%;
width: 100%;
background: #F8F8F8;
box-shadow: -10px 0 10px #000;
}
#nav ul {
width: 70%;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #03C;
}
#nav li {
display: inline;
padding: 0 8%;
background: red;
}
#nav a {
color: #F8F8F8;
text-decoration: none;
}
#nav a:visited {
text-decoration: none;
}