Alright, so I'm doing a web development class and I'm currently working on the last project for the course. I decided that I want a dropdown menu in the navbar so i followed the w3schools tutorial for it, but there is a slight problem. The dropdown, while it looks good, seems to have decided that it's background spanning the entire navbar sounds like a grand idea. Here's how it looks
Any of y'all got any idea how to fix this? this is my code
.menu{
overflow: hidden;
background-color: #000;
max-width: 100%;
position:relative;
top: -120px;
font-size: 16px;
}
.menu a{
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.menu a:link
.menu a:visited{
text-decoration: none;
}
.active{
background-color: #C00;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dopbtn{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdown:hover .dropbtn{
background-color: #9B0000;
}
.dropdown-content{
display: none;
position: static;
background-color: black;
max-width: 160px;
box-shadow: 0px 8px 16px 0px grey;
z-index: 1;
}
.dropdown-content a{
float: left;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover{
background-color: #7B0002;
}
.dropdown:hover .dropdown-content{
display: block;
}
<Html xmlns="http://www.w3.org/1999/xhtml">
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS/Candlekeep.css" />
<title>Home-Candlekeep</title>
</Head>
<Body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
<h1 class="logtxt">Candlekeep</h1>
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
</body>
</html>
There were few modifications required but I was able to fix the issue which you mentioned above, hope it helps.
body {
background-color: gray;
padding: 0;
margin: 0;
}
.menu {
background-color: #000;
position: relative;
font-size: 16px;
height: 32px;
}
.menu a {
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
}
.menu a:link .menu a:visited {
text-decoration: none;
}
.active {
background-color: #C00;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu a:hover,
.dropdown:hover .dropbtn {
background-color: #9B0000;
}
.dropdown-content a:hover {
display: block;
background-color: #7B0002;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
<h1 class="logtxt">Candlekeep</h1>
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
</body>
Related
I some how managed to but an additional menu on all of my pages but the Home page. Now I cannot figure out how to get rid of it. It is not even appearing under menus. Not sure how I did it :)
https://www.talismantherapeuticriding.org/rider-cup/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
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;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
add the color in swiper might help
I want dropdown effect to go sidways.
I am able to do that with display: inline-table effect. 1) is there a better way to do this??
though above works, it expands content on the right side of parent component( dropbtn in this case). You can refer to below code how this uglyfies layout.
I want to make it span towards left side of parent button so that the button stays at its current position. 2) Is there a way to hack it?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.btn {
background-color: #37abc8ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
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: inline-table;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.wrapper {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="wrapper">
<button class="btn">Hello</button>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
strong text
The fastest and easiest way is to put the .dropdown-content div before .dropbtn button in your HTML structure:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.btn {
background-color: #37abc8ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
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: inline-table;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-table;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.wrapper {
display: flex;
justify-content: space-between;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="wrapper">
<button class="btn">Hello</button>
<div class="dropdown">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<button class="dropbtn">Dropdown</button>
</div>
</div>
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.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);
z-index: 1;
}
.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;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I have been trying to figure out how to fix this drop-down menu. It seems to look okay until I hover and the menu appears horizontal instead of vertical. Is it something wrong with the css?
Thanks for your help!
JS Fiddle
HTML
<body>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
<ul style="list-style: none;">
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
<br>
</br>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" -- >EditRegion3<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<footer class="footer" id="footer">
<div align="center">
<p>Taylor Laboratory<br>
Leichtag Biomedical Research Building
4th Floor, Room 412
<br>
University of California, San Diego
<br>
9500 Gilman Dr. mc0654<br>
La Jolla, CA 92093
<br>
Ph: (858) 534-8190
<br>
Fax: (858) 534-8193 </p>
</div>
</footer>
</div>
</body>
CSS
li ul{
display:none;
}
li:hover ul{
display:block;
}
body {
margin: 0px;
background-color: #CCCCCC;
}
.content {
background-color: #FFFFFF;
padding-right: 6px;
padding-left: 6px;
}
.footer {
background-color: #357f7f;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
position: absolute;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1280px;
min height: 100%;
position: relative;
height: auto;
min-height: 100%
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content-spacer-top {
height: 10px;
}
#content-spacer-bottom{
height:1%;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
float: left;
text-align: center;
width: 14.28%;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
display: block;
list-style-type: none;
clear: none;
margin: 0px;
height: 2%;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #357F7F;
border-right-color: #357F7F;
border-bottom-color: #357F7F;
border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
Alright, so after having a look at your updated fiddle I was able to see the problem straight away. Firstly your code is really messy (sorry, but it is haha) and you have so many unnecessary css declarations.
It was so badly written I have just written a brand new fiddle and included a working navigation bar. Find the relevant code below.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
nav {
display: table;
border-top: 1px solid #357F7F;
border-bottom: 1px solid #357F7F;
}
nav ul {
display: table-row;
position: relative;
margin: 0;
padding: 0;
z-index: 1;
}
nav ul a {
display: block;
color: black;
text-decoration: none;
padding: 10px 15px;
font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
position: relative;
display: inline-block;
display: table-cell;
width: 1%;
list-style-type: none;
text-align: center;
}
nav ul li:hover {
background-color: #357F7F;
}
nav ul li:hover a {
color: white;
}
nav ul ul{
display: none;
position: absolute;
background: rgba(0,0,0,0.4);
width: 100%;
}
nav ul ul li {
width: 100%;
display: inline-block;
}
nav ul li:hover > ul {
display: block;
}
JSFiddle
Hope this helps! :)
I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.