I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. I tried some edits but isn´t do with dropdown. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<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">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.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 {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
tyle>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
add hover css to display the drop-down content
.dropbtn:hover ~ .dropdown-content {display: block;}
Related
I am doing a project where I need bootstrap. It works perfectly but when I try to add a dropdown menu it isn't working. Also, I am making the dropdown menu from here. Here is html code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="menu">
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>
And here is the css code:
.menu {
overflow: hidden;
background-color: transparent;
font-family: Arial;
}
.menu a {
float: left;
font-size: 25px;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 25px;
border: none;
color: white;
padding: 15px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdown:hover .dropbtn {
color:white;
text-decoration:underline;
text-decoration-color:white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: black;
padding: 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
When I delete the <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> the dropdown works perfectly but when I add it it doesn't work.
Please reply.
The answer to this problem is clear! If you read bootstrap docs about dropdowns, you would notice that dropdown class is one of the classes that are used by bootstrap. So to solve the issue you need to change your class name to something else like dropdownME class, like the code below:
.menu {
overflow: hidden;
background-color: #000;
font-family: Arial;
}
.menu a {
float: left;
font-size: 25px;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
.dropdownME {
float: left;
overflow: hidden;
}
.dropdownME .dropbtn {
font-size: 25px;
border: none;
color: white;
padding: 15px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdownME:hover .dropbtn {
color:white;
text-decoration:underline;
text-decoration-color:white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: black;
padding: 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdownME:hover .dropdown-content {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
Home
News
<div class="dropdownME">
<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>
</body>
</html>
I also change the background-color of .menu for better showing.
im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc
Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}
I want to build a sidebar like W3 Schools website. For example if the screen max-width will 456px then sidebar will be hide and a menu icon would display. On click of menu icon sidebar will open.
enter image description here
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: arial;
}
/* body{
width: 100%;
min-height: 100vh;
} */
.navbar {
top: 0px;
left: 20px;
position: fixed;
width: 250px;
height: 100%;
background: #FFFFFF;
}
.navbar-brand {
float: left;
text-decoration: none;
font-size: 19px;
padding: 0.2em 0.7em;
color: white
}
.navbar .navbar-nav .nav-item {
display: inline;
}
.navbar .livestock-logo {
background: white;
margin-left: auto;
margin-right: auto;
margin-top: 1px;
width: 60%;
}
.navbar ul li:hover {
background: #3f612e;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important
}
.navbar ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 20px;
}
.navbar ul li {
display: flex;
left: 10px;
padding: 10px;
border-top: 1px solid rgb(235, 232, 232);
}
.navbar ul li a {
text-align: left;
padding-left: 25px;
font-size: 0.8em !important;
color: #000000;
display: block
}
.navbar ul li a .fas {
width: 20px !important
}
.navbar ul li a .far {
width: 20px !important
}
.navbar-nav .nav-item a {
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.navbar ul li a:hover {
color: #fff;
text-decoration: none
}
.toggle-collapse {
float: left;
width: 45px;
height: 32px;
background-color: transparent;
/* color: white; */
border: 1px solid blue;
border-radius: 3px;
cursor: pointer;
display: none;
}
toggle-collapse:hover {
color: white
}
#media screen and (max-width:456px) {
.navbar-brand {
display: inline-block;
float: none;
}
.toggle-collapse {
display: inline-block;
}
.navbar-nav {
color: white;
padding: 0%;
}
.navbar .navbar-nav .nav-item {
display: block;
list-style: none;
}
.navbar-collapse {
width: 100%;
overflow: hidden;
text-align: left;
height: 0vh;
transition: all 499ms ease;
}
.collapse {
height: 100vh;
}
}
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
body {
background: rgb(247, 247, 247) !important;
}
</style>
<head>
<meta charset="UTF-8"> {% load static %}
<meta name="viewport" content="device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<link rel="stylesheet" type="text/css" href="../static/css/responsive.css" />
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!-- <div>
<button class="toggle-collapse">
<img src="../static/images/toggle.png">
</button>
</div> -->
<nav>
<div class="navbar">
<button class="toggle-collapse">
<img src="../static/images/toggle.png">
</button>
<div class="navbar-collapse">
<div class="livestock-logo">
<img src="../static/images/livestock.png" alt="livestock">
</div>
<ul class="navbar-nav">
<li class="nav-item">
<img src="../static/images/home.png"> Home
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Index
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Users
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Companies
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Logout
</li>
<li class="nav-item">
<img src="../static/images/search.png"> Search
</li>
</ul>
</div>
</div>
</nav>
</body>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.toggle-collapse').click(function() {
$('.navbar-collapse').toggleClass("collapse");
})
})
</script>
</html>
I am unable to remove the white navbar.
Any help will be highly appriciated.
I'm using two Fontawesome icons without any text for a clickable dropdown menu, but these icons won't toggle the dropdown menu. When I click on a padding around them, dropdown works. As you can see in the W3schools example, clicks on the text and padding are working, but not on the icon. How could I fix that?
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.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 {
cursor: pointer;
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,
.dropbtn:focus {
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;
}
.show {
display: block;
}
<!DOCTYPE html>
<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">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
You can add .fa to your function
Code:
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn, .fa')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
Fiddle:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn, .fa')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.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 {
cursor: pointer;
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,
.dropbtn:focus {
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;
}
.show {
display: block;
}
<!DOCTYPE html>
<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">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
May be like adding a new class for those elements we need to escape the close click:-
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() { document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.esc')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.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 {
cursor: pointer;
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, .dropbtn:focus {
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;
}
.show {
display: block;
}
<!DOCTYPE html>
<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">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn esc" onclick="myFunction()" >Dropdown
<i class="fa fa-caret-down esc" ></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
I am working on front-end. I have done a drop-down. That's working fine in other pages. But in only one page it is overlapping nav-bar.
body{
margin:0;
}
.navbar {
overflow: hidden;
background-color: #1e436b;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar h4 .logo{
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
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: #ffd400;
color:black;
}
.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;
color:#000;
}
.dropdown:hover .dropdown-content {
display: block;
margin-top:4%;
}
#imgId {
-webkit-box-shadow: 0 0 18px 18px #1e436b inset;
-moz-box-shadow: 0 0 18px 18px #1e436b inset;
box-shadow: 0 0 18px 18px #1e436b inset;
}
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>header</title>
<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">
<link rel="stylesheet" href="./CSS/header.css">
</head>
<body>
<div class="navbar">
Login
Team
Projects
<div class="dropdown">
<a href="process.obj" class="dropbtn">Process
<i class="fa fa-caret-down"></i>
</a>
<div href="project.obj" class="dropdown-content">
<a>New Joiner Process</a>
<a>Management Process</a>
</div>
</div>
Home
<div id="imgId">
<img src="./images/logo1.png" class="logo" style="padding:0px;" width="80px" height="50px">
</div>
</div>
</body>
</html>
Anyone having any idea about this issue. What is the behind screen process of this issue?
I am working on this for a week. But I'm not getting it. Beginner here.
body{
margin:0;
}
.navbar {
overflow: hidden;
background-color: #1e436b;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar h4 .logo{
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
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: #ffd400;
color:black;
}
.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;
top: 25px;
}
.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;
color:#000;
}
.dropdown:hover .dropdown-content {
display: block;
margin-top:4%;
}
#imgId {
-webkit-box-shadow: 0 0 18px 18px #1e436b inset;
-moz-box-shadow: 0 0 18px 18px #1e436b inset;
box-shadow: 0 0 18px 18px #1e436b inset;
}
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>header</title>
<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">
<link rel="stylesheet" href="./CSS/header.css">
</head>
<body>
<div class="navbar">
Login
Team
Projects
<div class="dropdown">
<a href="process.obj" class="dropbtn">Process
<i class="fa fa-caret-down"></i>
</a>
<div href="project.obj" class="dropdown-content">
<a>New Joiner Process</a>
<a>Management Process</a>
</div>
</div>
Home
<div id="imgId">
<img src="./images/logo1.png" class="logo" style="padding:0px;" width="80px" height="50px">
</div>
</div>
</body>
</html>
Extremely simple. Add a top: 25px; to your css.