I've been trying with a dropdown menu for a while now and managed to get it to work with overflow being hidden in the navbar, however doing so breaks the rest of the navbar.
The navbar works fine when overflow is set to hidden in .navbar, however this hides the dropdown menu. I've tried to find a solution for this but haven't had much luck.
* {
font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
background-color: white;
margin: 0px;
box-sizing: border-box;
}
.darkmode {
background-color: #3d3d3d;
color: white;
}
.navbar {
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}
.navbar a, .navbar p, .dropdown button {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 150%;
display: inline-block;
padding: 14px 12px;
background-color: #197053;
margin: 0px;
border: none;
border-bottom: 5px solid transparent;
}
.navbar-title {
position: relative;
float: left;
margin: 0px;
}
.navbar-current {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
ul.navbar-nav {
float: right;
margin: 0px;
list-style-type: none;
padding: 0px;
}
.navbar-nav li {
float: left;
}
.navbar a:hover, .dropdown:hover button {
border-bottom: 5px solid #3aa682;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover button {
border-bottom: 5px solid #3aa682;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
display: block;
color: black;
background-color: white;
padding: 14px 12px;
text-decoration: none;
margin: 0px;
font-size: 150%;
font-weight: normal;
border: none;
}
.dropdown-content a:hover {
background-color: #c9c9c9;
border: none;
}
.title p {
font-size: 250%;
padding: 0px 50px;
padding-top: 20px;
margin: 0px;
}
.subtitle p {
font-size: 200%;
padding: 0px 50px;
margin: 0px;
}
.body p {
font-size: 120%;
padding: 0px 50px;
margin: 0px;
}
.body a:link, .body a:visited {
color: #262626;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: left;
color: black;
}
.darkmode-button {
color: black;
font-size: 80%;
padding: 10px 9px;
margin: 0px;
border: none;
font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
background-color: white;
}
.darkmode .darkmode-button {
color: white;
background-color: #3d3d3d;
}
.darkmode-button:hover {
color: #878787;
}
<!doctype html>
<html>
<head>
<title>Home - Title</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar">
<div class="navbar-title">
<p>Title</p>
</div>
<div class="navbar-current">
Home
</div>
<ul class="navbar-nav">
<li class="dropdown">
<button onclick="location.href='school.html';">School</button>
<div class="dropdown-content">
Biology
Chemistry
Physics
</div>
</li>
<li>Photography</li>
<li>Music</li>
</ul>
</div>
<div class="title">
<p>Introduction</p>
</div>
<div class="body">
<p>---</p>
</div>
<div class="footer">
<button onclick="darkMode()" class="darkmode-button" id="darkmode-button">Dark Mode</button>
</div>
</body>
</html>
.navbar {
width: 100%;
display: inline-block;
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}
Make width 100% and display inline-block. This should do the job.
Related
I've tried having it be an unordered list item without it being a paragraph element, I've tried putting it in a div as well. For some reason I'm just unable to get those to be stacked with the smaller "test" under the bigger TestTest. Seems to work in the rest of the page if I have it as a separate div, just not sure of the reason why it's not working in the footer.
Here is my HTML and CSS:
body {
background-color: #414141;
/* background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden; */
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
#media (max-width: 7680px) {
body {
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
}
#media (max-width: 800px) {
body {
background: url(/images/mobilebackground.jpg) no-repeat center center fixed;
}
}
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
box-shadow: 0px 13px 4px -3px rgba(65, 65, 65, 0.616);
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0.5%;
}
#TestTest {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Japan {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
text-decoration: overline 4px solid #414141;
box-shadow: 0px -13px 4px -3px rgba(65, 65, 65, 0.616);
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 70%;
position: absolute;
top: 15%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
float: right;
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
float: right;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="TestTest">Test<span id="Japan">Test</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</footer>
</body>
</html>
You should not be using float for FooterTitle and FooterCaption -- So remove the float:right;
Then you can add text-align:right; to the <footer> CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
The rest .. Like height and getting everything to show in the footer I trust you can do :) -- Personally, I think height:7%; is a bad idea .. Better to give it a static height height, or a height that statically will change inside media queries. --
OR You could scrap the text align right to get it to align left but still float right like:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content{
float:right;
text-align:left;
width:100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
This is the CSS and HTML for the nav bar which goes:
menu icon (#image), then main text (.red), then search icon (#search), and the search bar that won't stay up, (input [type=text].
My problem is that the search bar won't stay with the rest of the items despite it still having tons of space. It doesn't want to expand to a width larger than 64.2px and then it decides to stay under the rest of the items.
I've tried all sorts of displays and widths, but this is the only one that keeps it on top and it's too small in my opinion.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
/* this is the css the text box follows */
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
/* This is the css for the nav */
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
width: 60%;
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
/* This one (.red) appears before the search photo and text box */
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
/* menu icon */
#search {
width: 7%;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
/* search image magnifying glass icon everything else after this point is
just part of a dropdown list which i don't think is relevant to the problem */
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si">
<img class="dropbtn" id="image" src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon">
</a>
<div class="dropdown-content">
Home
<br>
Music and Lyric Videos
<br>
Information
<br>
Performances
<br>
Photos
<br>
Song Info
<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li>
<img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search">
</li>
<li>
<input type="text" placeholder="Search...">
</li>
</ul>
I don’t know what style you want, but I tried to make some modifications. Do you want this Style?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
flex-grow: 1;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
/* width: 60%; */
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
#search {
width: 40px;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*
*/
ul>li {
float: left;
}
ul>li:last-child {
width: 30%;
}
input[type=text] {
width: 100%;
}
.fixedWidth {
width: 65px !important;
}
body,
html {
border: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown fixedWidth">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si"><img class="dropbtn" id="image"
src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon"></a>
<div class="dropdown-content">
Home<br>
Music and Lyric Videos<br>
Information<br>
Performances<br>
Photos<br>
Song Info<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li><img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search"></li>
<li><input type="text" placeholder="Search..."></li>
</ul>
</div>
</body>
I am having trouble trying to remove a gap between a navigation bar and a div that is supposed to show under the navigation bar.
Here's my code:
<%-- Nav Bar --%>
<ul>
<li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li class="dropdown">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</li>
</ul>
<%-- Iframe --%>
<div class="h_iframe">
<iframe src="inicio.aspx" name="ventana" ></iframe>
</div>
This is the CSS I'm using:
body
{
font: 14px 'Segoe UI', 'Helvetica Neue', 'Droid Sans', Arial, Tahoma, Geneva, Sans-serif;
overflow-y: hidden;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.h_iframe iframe {
width: 100%;
height: 100%;
margin-top: 0;
}
.h_iframe {
height: 100%;
width: 100%;
margin-top: 0;
top: 0;
z-index: -1;
padding-left: 159px;
position: fixed absolute
}
.welcometitle {
float: left;
display: block;
color: white;
text-align: center;
padding: 1px 16px;
padding-top: 12px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #006cb4;
padding-left: 163px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
img {
width: 92%;
padding-left: 8px;
margin: 0;
top: 0;
}
.dropbtn {
background-color: #111;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #d4d4d4;
color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
/*display: block;*/
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;
position: fixed;
}
.active {
background-color: #4CAF50;
}
I have tried different things but it just doesn't seem to work. Can you find where I'm messing it up?
You can add some little CSS to the iframe class.
Here is the code:
.h_iframe {
margin-top: -20px;
}
The css hover drop down worked perfectly on fresh page, but it is not working when pasted on html page which is linked with bootstrap (I hided other css pages so I found bootstrap causing the problem!)
So using devtool I hided 'position:absolute' from 'dropdown-contents' which is working but the below container jumping downward:http://prntscr.com/lu7frm
Here is the code:
.navbar {
overflow: hidden;
/* background-color: #333;*/
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
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-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
You need to remove the overflow:hidden from you code (.navbar and .dropdown) to be able to see the dropdown. You no more need them to clear the float as bootstrap is already doing this.
.navbar {
font-family: Arial, Helvetica, sans-serif;
border-color:#000!important; /*to show that the height is good*/
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
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-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
I am creating a webpage in which when I hover over the .Soccer section, it will dropdown and show Link1, Link2, Link3.
Without the position: fixed;, the code works perfectly fine.
As I want the heading in top of the webpage, I put position: fixed;
But as soon as I put that on, the dropdown button for "Soccer" does not work.
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
/* Removing this makes the dropdown work */
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-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;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
Please ask me if you do not understand the concept of what I am trying to do. And if you do understand, please help me.
This is my first post so it might be a bit off compared to other posts.
You had a overflow: hidden on your ul element. Therefore the dropdown wasn't shown. Removing it makes the dropdown appear again.
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-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;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
Just change the position of .Soccer-content to fixed, too
html{
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {background-color: teal}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>