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>
Related
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.
Having some trouble getting my dropdown menu to display properly on hover; it's currently displaying all on one line and also appears not to be overlaying, despite z-index being set to 1. Played around with making projects a p, a, and div but still stumped. Any advice?
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav class="navbar">
Name
<div class="dropdown">
<a>Projects</a>
<div class="dropdown-content">
Project 1
Project 2
Project 3
</div>
</div>
About
Contact
</nav>
</body>
</html>
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: .015em;
color: #000000;
}
a:link, a:visited {
color: #000000;
text-decoration: none;
}
a:hover, a:active {
color: #a9c4d4;
text-decoration: underline;
}
.navbar {
overflow: hidden;
font-size: 2.5em;
font-weight: 700;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0px 0px 0px 110px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.navbar a {
float: left;
display: block;
margin: 10px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.dropdown-content a {
float: none;
margin: 10px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#name-link {
color: #a9c4d4;
text-decoration: none;
}
a.selected-link {
text-decoration: underline;
}
jsfiddle here: https://jsfiddle.net/29gev50b/2/
change the css of "dropdown-content". The position absolute does that thing. remove this position absolute css from "dropdown-content" and it will work fine.
You did not leave enough room in your navbar div container for the expansion of the menu which is why it gets cut off. z-index won't work because the box (div) isn't large enough.
Add min-height: 100px; to your navbar to fix.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: .015em;
color: #000000;
}
a:link,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover,
a:active {
color: #a9c4d4;
text-decoration: underline;
}
.navbar {
overflow: hidden;
font-size: 2.5em;
font-weight: 700;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0px 0px 0px 110px;
padding: 10px 0px 10px 0px;
min-height: 100px;
background-color: #ffffff;
}
.navbar a {
float: left;
display: block;
margin: 10px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.dropdown-content a {
float: none;
margin: 10px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#name-link {
color: #a9c4d4;
text-decoration: none;
}
a.selected-link {
text-decoration: underline;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav class="navbar">
Name
<div class="dropdown">
<a>Projects</a>
<div class="dropdown-content">
Project 1
Project 2
Project 3
</div>
</div>
About
Contact
</nav>
</body>
</html>
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;
}
https://jsfiddle.net/0q5s98sL/
Below is attached a jsfiddle, currently the drop down menu doesn't work and I want it to be position in the top right corner instead of the left,
If possible id like the drop down menu to fill up the entire navbar when selected as this web app is solely for mobile devices,
does anyone have any ideas of how I can solve these issues?
Thanks in advance
body {
background-color: black;
}
#icon {
max-width: 200px;
margin: 1% auto;
}
#navlogo {
position: absolute;
right: 3rem;
height: 4rem;
top: 2rem;
line-height: 100px;
}
footer {
width: 100%;
background: black;
color: white;
}
.fa {
padding: 20px;
font-size: 30px;
color: white;
}
.fa:hover {
color: lightgrey;
text-decoration: none;
}
#logo
/*main logo*/
{
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
margin-left: auto;
margin-right: auto;
z-index: -1;
line-height: 100px;
}
h1 {
font-family: "Josefin Sans";
font-size: 2.5em;
right: 3rem;
}
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
#icon {
max-width: 150px;
}
h4 {
font-size: 1.9em;
}
img {
max-height: 100px;
}
p {
padding-bottom: 5rem;
}
p#h6 {
font-family: "Josefin Sans";
color: white;
font-size: 3.5rem;
float: left;
line-height: 150px;
padding-top: 0;
z-index: -1;
margin-left: 1rem;
}
#h7 {
font-family: "Josefin Sans";
color: white;
float: left;
font-size: 2.5rem;
line-height: 150px;
}
#h8 {
font-family: "Josefin Sans";
color: white;
float: left;
font-size: 2.5rem;
line-height: 150px;
}
h4 {
font-family: "Josefin Sans";
color: white;
font-size: 3rem;
width: 100px;
text-align: left;
position: fixed;
top: 0rem;
left: 1rem;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.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;
background-color: inherit;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="js/java.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="dropdown">
<button class="dropbtn"> <img src="http://konpakuto.com/logo.jpg">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h4 style="padding-bottom:-40rem;">health</h4>
by adding the following CSS you will get a working drop down
.navbar {
overflow: visible;
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown:hover .dropdown-content {
display: block;
}