I have most of the HTML and CSS written for the dropdown menu, however I can't get the dropdown menu to be stacked vertically, it is displayed horizontally. How can I make it so it is stacked vertically? This is a picture of what the horizontal menu looks like, the second element I want is off the screen because it is next to the first one.
Here is the HTML code:
<!-- Buttons to navigate site -->
<div class = "navbar">
<button id = "home">Home</button>
<button id = "aboutus">About Us</button>
<!-- Wellness Dropdown Menu -->
<div class = "dropdown">
<button id = "wellness">Wellness</button>
<div class = "dropdown-content">
Recipes
Blog
</div>
</div>
</div>
Here is the CSS code:
/*-----------
Dropdown Menu
-------------*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 180px;
z-index: 1;
}
.dropdown-content a {
padding: 5px 20px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
}
.dropdown-content a:hover {
color: #efdcaf;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #wellness {
color: #efdcaf;
}
That is because a tags are displayed inline.
Use display block to fix your problem.
.dropdown-content a {
display: block;
padding: 5px 20px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
}
You can use display:block; and move the text towards left;
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 180px;
z-index: 1;
}
.dropdown-content a {
display: block;
padding: 5px 5px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
text-align: left;
}
.dropdown-content a:hover {
color: #efdcaf;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #wellness {
color: #efdcaf;
}
<div class="navbar">
<button id="home">Home</button>
<button id="aboutus">About Us</button>
<!-- Wellness Dropdown Menu -->
<div class="dropdown">
<button id="wellness">Wellness</button>
<div class="dropdown-content">
Recipes
Blog
</div>
</div>
</div>
Update .dropdown:hover .dropdown-content as below.
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
button {
padding: 5px 20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 180px;
z-index: 1;
}
.dropdown-content a {
padding: 5px 20px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
}
.dropdown-content a:hover {
color: #efdcaf;
}
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dropdown:hover #wellness {
color: #efdcaf;
}
<div class="navbar">
<button id="home">Home</button>
<button id="aboutus">About Us</button>
<!-- Wellness Dropdown Menu -->
<div class="dropdown">
<button id="wellness">Wellness</button>
<div class="dropdown-content">
Recipes
Blog
</div>
</div>
</div>
Related
I am trying to create a dropdown menu from "about us" but there seems to be some color unabling to give a proper dropdown. On the navigation bar there's a block of red color next to the "Home" button. Also when i hover on the "About us" button there are again red color visible therefore not aligning the dropdown menu links. Can someone explains how to remove the additional color? Here's my code:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<br>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: TIMES ROMAN;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #330000;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
<body style="background-color:#C0C0C0">
<div class="topnav">
<img src="D1.jpg" height="70" width="120" align="left"><br>
Home
<div class="dropdown">
<button class="dropbtn"><a class="active">About us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
</div>
<div class="row">
<div class="column">
Who are we?
What do we do
Project aims/goals
History
</div>
</div>
</div>
</div>
Contact ✆
Gallery 📸
Our services
Policy
Sign Up
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</body>
</html>
The way you code your css is different then how you have the html structure.
<a class="active"><button class="dropbtn">About us <i class="fa fa-caret-down"></i></button></a>
Check the above line and replace it in your code.
Wrap your button element inside a (anchor) tag.
I created a dropdown menu. But there I face a problem when I clicked outside keeping the dropdown menu open, the dropdown menu don't close. I try to add many javascript codes but in the end, I can't do it. Please someone please help me to fix this issue. I have given below my project code. I need this features outside click dropdown menu close only through this JS code.
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-content').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display:flex;
align-items:center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown{
display:inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
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;}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div1')">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id=div1>
<p>Div1 dropdown</p>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div2')">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id=div2>
<p>Div2 dropdown</p>
</div>
</div>
</div>
One way to do this is to add an eventListener on the document. Then you check what has been clicked and if it involves your dropdown, do nothing, and if it doesn't involve your dropdown, then close the dropdowns.
This example uses closest() which will go up the parents of the clicked element to try and find one that has the class dropdown. If it finds one (not null), then we know we don't want to close the dropdown since the user is interacting with it. All other cases will close the dropdown.
document.addEventListener('click', (e) => {
// cases where we want to close the dropdown
if (e.target.closest(".dropdown") === null) {
document.querySelectorAll('.dropdown-content').forEach(el => el.classList.remove("show"));
}
});
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-content').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
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;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div1')">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="div1">
<p>Div1 dropdown</p>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div2')">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="div2">
<p>Div2 dropdown</p>
</div>
</div>
</div>
</div>
Perhaps this solution, which is not the best and reliable, but works without JS, will be able to help you:
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
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;
}
/*
added to CSS
*/
.dropbtn + .dropdown-content:hover, .dropbtn:focus + .dropdown-content {
display: block;
pointer-events: all !important;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<p>Div1 dropdown</p>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<p>Div2 dropdown</p>
</div>
</div>
</div>
So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?
function myFunction() {
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.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;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script
Edited CSS and HTML:
function removeListItem(ev) {
const EL_list = ev.currentTarget.closest("li")
EL_list.remove();
}
const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }
html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}
#navbar {
background-color: #333;
position: sticky;
display: flex;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#navbar>a {
display: block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar .home {
background-color: green;
}
.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-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
display: flex;
}
.dropdown-list li a {
padding: 14px 16px;
flex: 1;
}
.dropdown-list li:hover a {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#main-container {
padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
Google
<button class='deleteBtn'>X</button>
</li>
<li>
Youtube
<button class='deleteBtn'>X</button>
</li>
<li>
Amazon
<button class='deleteBtn'>X</button>
</li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
use preventDefault().
Read More about preventDefault
function myFunction(e) {
e.preventDefault();
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.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;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
I'm trying to add a navigation bar to a web app I'm making for a class, and I wanted to use a drop-down menu in it (too many things to include to put everything straight across).
I want the bar to be fixed to the top of the page, but when I put in position: fixed;, the drop-down menu stops working.
Is there any way around this? Am I just putting the position: fixed; in the wrong spot, or is conflicting with the drop down content having position: absolute; maybe...?
(I'm very new to web stuff, so if you see anything else I could change/approve, please let me know! Advice very much appreciated)
ul {
list-style-type: none;
margin: 0;
top: 0;
position: fixed;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.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;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</br>
</br>
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</head>
</html>
Basically, "View Pages" should become a drop down menu when hovered over with the mouse, and it does if I take out the "position:fixed;" line, but... I want the position to be fixed.
Put your navigation into a layer. And make this layer with fixed position.
.navbar-top {
margin: 0;
padding: 0;
width: 100%;
top: 0;
position: fixed;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
/*position: fixed;*/
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.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;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="navbar-top">
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</div>
</body>
</html>
You can delete ul{overflow:hidden;}
You should not apply for the position:fixed on the UL
You can use a div to warp the UL and apply on it the position fixed.
Here is one way to achieve this (live demo):
.mainheader {
height: 25px;
position: fixed;
display: block;
z-index: 10;
background: #333;
width: 100%;
font-size: 14px;
top: 0;
font-family: Calibri;
}
.nav {
width: 100%;
height: 25px;
background: #333;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.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;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="mainheader">
<div class="nav">
<ul>
<li>
<a class="active" href="/homePageAgent">Home
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">View Pages
</a>
<div class="dropdown-content">
<a href="/agentViewFlights">View Booked Flights
</a>
<a href="/agentTopCustomers">View Top Customers
</a>
</div>
</li>
<li style="float:right">
<a href="/logout">Logout
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I am new to Angular 6 and Bootstrap ,Here I have a Navigation bar with 3 nav items .
In this I have a nav item named as Store ,When User mouse hover on the Store I need to show a mega menu .mega menu should have the with of the nav bar .
I have tried something but I could not get what I expected .
Stackblitz : https://stackblitz.com/edit/angular-q4p7cc?file=src%2Fstyles.css
can anyone help me to solve this .
try solution
HTML:
<div class="navbar">
<div *ngFor="let cat of category" class="dropdown">
<button class="dropbtn">Link {{cat.catnumber}}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div *ngFor="let catg of cat.nest" class="column">
<h3>Category {{cat.catnumber}} {{catg.link}} </h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
style.css:
.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 {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
background: yello;
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}