When I remove the margin-left, margin and padding value to 0px from the root ul tag then
all menu display in the left side and the dropdown-menu size match
I want to move all menus plus dropdown-menu to right. I moved the menu to the right using margin-left, margin: 15px, and padding 15px in the root ul tag and it works but the drop-menu size isn't matching, please look up the picture.
[output of this page] [1]: https://i.stack.imgur.com/jLZnO.png
[expect output] [2]: https://i.stack.imgur.com/wvOLY.png
ul {
margin: 15px;
padding: 15px;
list-style: none;
margin-left: 50%;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
You just need to add float:right in the css, in the ul part. Also remove the margin-left: 65%; because it will make your design unresponsive since your buttons have fixed width.
ul {
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
try like this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> sport </title>
<link rel="stylesheet" href="sport.css">
</head>
<body>
<ul class="menu">
<li > <a>sport</a>
<ul>
<li >football </li>
<li >soccer </li>
<li >basketbal</li>
</ul>
</li>
<li > <a>more info</a>
<ul>
<li ># </li>
<li > # </li>
<li >#</li>
</ul>
</li>
</ul>
</body>
</html>
css
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
position: relative;
}
ul li ul{
display:none;
position:absolute;
right:-200px;
top:0;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li:hover ul{
display: block;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
float:right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<html>
<head>
<style>
</style>
</head>
<body>
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
</body>
</html>
add in ul style
ul{
float: right;
}
Try this Example
Html
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
Css
ul.menu {
width: 200px;
}
ul.menu>li{
position:relative;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: right;
width: 100%;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position:absolute;
left: 200px;
top: 0px;
width:200px;
}
Use this CSS:
ul.menu{
margin: 0px;
padding: 0px;
list-style: none;
margin-left:65%;
}
ul.menu li{
float: left;
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
li {
position: relative;
}
li ul {
position: absolute;
left: 0;
margin: 0;
padding: 0;
display: block;
width: inherit;
}
Related
I'm trying to create a dropdown menu like wistia.com. But I cannot get this hover effect. I've put my code in a snippet below. When I hover on the main menu link the dropdown should appear. And when I hover outside of the dropdown it should vanish. Now it only appears when I hover on the menu but doesn't hide when I leave the menu.
let dropdown = document.querySelector(".dropdown");
let chevron = document.querySelector(".main-link i");
function dropdownDisplay() {
dropdown.style.display = "flex";
}
function dropdownHide() {
dropdown.style.display = "none";
}
function chevronTransition() {
chevron.style.trasform = "rotateX(0deg)";
}
:root {
--font1: roboto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
width: 100%;
height: 70px;
border-bottom: 1px solid #ddd;
font-family: var(--font1);
}
nav .container {
width: 1340px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
nav .container .links {
display: flex;
align-items: center;
}
nav .container .links .menu {
margin-left: 32px;
}
nav .container .links .menu ul .main-link {
list-style: none;
display: inline-block;
margin-right: 24px;
cursor: pointer;
}
nav .container .links .menu ul .main-link:hover i {
transform: rotateX(180deg);
}
nav .container .links .menu ul .main-link .dropdown {
width: 1340px;
position: absolute;
top: 100%;
left: 0;
padding: 32px 0;
cursor: initial;
display: none;
border-bottom: 1px solid #ddd;
}
nav .container .links .menu ul .main-link .dropdown .cta {
width: 300px;
padding-right: 16px;
}
nav .container .links .menu ul .main-link .dropdown .cta h4 {
color: #3ea9f5;
font-size: 30px;
}
nav .container .links .menu ul .main-link .dropdown .cta p {
color: #505050;
margin-bottom: 32px;
margin-top: 24px;
}
nav .container .links .menu ul .main-link .dropdown .cta a {
color: #fff;
background-color: #3ea9f5;
padding: 12px 32px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
display: inline-block;
}
nav .container .links .menu ul .main-link .dropdown .cta a:focus {
outline: none;
}
nav .container .links .menu ul .main-link .dropdown .major {
width: 150px;
}
nav .container .links .menu ul .main-link .dropdown .major ul li {
display: block;
margin-bottom: 8px;
}
nav .container .links .menu ul .main-link .dropdown .major ul li a {
color: #505050;
font-weight: 700;
text-decoration: none;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links {
display: flex;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links .sub-menu {
margin-right: 20px;
width: 150px;
}
nav
.container
.links
.menu
ul
.main-link
.dropdown
.sub-menu-links
.sub-menu
h6 {
font-weight: bold;
color: #a7afba;
font-size: 14px;
margin-bottom: 12px;
}
nav
.container
.links
.menu
ul
.main-link
.dropdown
.sub-menu-links
.sub-menu
ul
li {
display: block;
list-style: none;
margin-bottom: 8px;
}
nav
.container
.links
.menu
ul
.main-link
.dropdown
.sub-menu-links
.sub-menu
ul
li
a {
font-size: 15px;
text-decoration: none;
color: #505050;
}
nav .container .links .menu ul .main-link i {
font-size: 12px;
}
nav .container .links .logo h3 {
font-size: 36px;
}
<nav>
<div class="container">
<div class="links">
<div class="logo">
<h3>WISTIA</h3>
</div>
<div class="menu">
<ul>
<li
class="main-link"
onmouseenter="dropdownDisplay()"
onmouseout="chevronTransition()"
>
Product <i class="fas fa-chevron-down"></i>
<div class="dropdown">
<div class="cta">
<h4>Product</h4>
<p>
Use our software and your videos to grow your business.
</p>
Start for free
</div>
<div class="major">
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Integration</li>
</ul>
</div>
<div class="sub-menu-links">
<div class="sub-menu">
<h6>CREATE</h6>
<ul>
<li>Recording</li>
<li>Hosting</li>
<li>Collaboration</li>
<li>Management</li>
</ul>
</div>
<div class="sub-menu">
<h6>PRESENT</h6>
<ul>
<li>Player</li>
<li>Embedding</li>
<li>Interactivity</li>
<li>Channels</li>
</ul>
</div>
<div class="sub-menu">
<h6>GROW</h6>
<ul>
<li>SEO</li>
<li>Subscribers</li>
<li>Reach & retarget</li>
<li>Analytics</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-link">
Learning Center <i class="fas fa-chevron-down"></i>
</li>
<li class="main-link">
Podcasts & Series <i class="fas fa-chevron-down"></i>
</li>
<li class="main-link">
About <i class="fas fa-chevron-down"></i>
</li>
</ul>
</div>
</div>
<div class="buttons">
Sign In
Get Started
</div>
</div>
</nav>
You have not added hover state for the dropdown. You have to add
nav .container .links .menu ul .main-link:hover .dropdown {
display: block;
}
Add mouseover and mouseout events:
let dropdown = document.querySelector(".dropdown");
let chevron = document.querySelector(".main-link i");
function dropdownDisplay() {
dropdown.style.display = "flex";
}
function dropdownHide() {
dropdown.style.display = "none";
}
function chevronTransition() {
chevron.style.trasform = "rotateX(0deg)";
}
document.querySelector('#product-link').addEventListener("mouseover", () => {
dropdownDisplay();
});
document.querySelector('#product-link').addEventListener("mouseout", () => {
dropdownHide();
});
:root {
--font1: roboto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
width: 100%;
height: 70px;
border-bottom: 1px solid #ddd;
font-family: var(--font1);
}
nav .container {
width: 1340px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
nav .container .links {
display: flex;
align-items: center;
}
nav .container .links .menu {
margin-left: 32px;
}
nav .container .links .menu ul .main-link {
list-style: none;
display: inline-block;
margin-right: 24px;
cursor: pointer;
}
nav .container .links .menu ul .main-link:hover i {
transform: rotateX(180deg);
}
nav .container .links .menu ul .main-link .dropdown {
width: 1340px;
position: absolute;
top: 100%;
left: 0;
padding: 32px 0;
cursor: initial;
display: none;
border-bottom: 1px solid #ddd;
}
nav .container .links .menu ul .main-link .dropdown .cta {
width: 300px;
padding-right: 16px;
}
nav .container .links .menu ul .main-link .dropdown .cta h4 {
color: #3ea9f5;
font-size: 30px;
}
nav .container .links .menu ul .main-link .dropdown .cta p {
color: #505050;
margin-bottom: 32px;
margin-top: 24px;
}
nav .container .links .menu ul .main-link .dropdown .cta a {
color: #fff;
background-color: #3ea9f5;
padding: 12px 32px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
display: inline-block;
}
nav .container .links .menu ul .main-link .dropdown .cta a:focus {
outline: none;
}
nav .container .links .menu ul .main-link .dropdown .major {
width: 150px;
}
nav .container .links .menu ul .main-link .dropdown .major ul li {
display: block;
margin-bottom: 8px;
}
nav .container .links .menu ul .main-link .dropdown .major ul li a {
color: #505050;
font-weight: 700;
text-decoration: none;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links {
display: flex;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links .sub-menu {
margin-right: 20px;
width: 150px;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links .sub-menu h6 {
font-weight: bold;
color: #a7afba;
font-size: 14px;
margin-bottom: 12px;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links .sub-menu ul li {
display: block;
list-style: none;
margin-bottom: 8px;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links .sub-menu ul li a {
font-size: 15px;
text-decoration: none;
color: #505050;
}
nav .container .links .menu ul .main-link i {
font-size: 12px;
}
nav .container .links .logo h3 {
font-size: 36px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar wistia</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7e5d687fd9.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="container">
<div class="links">
<div class="logo">
<h3>WISTIA</h3>
</div>
<div class="menu">
<ul>
<li class="main-link" id="product-link">
Product <i class="fas fa-chevron-down"></i>
<div class="dropdown">
<div class="cta">
<h4>Product</h4>
<p>
Use our software and your videos to grow your business.
</p>
Start for free
</div>
<div class="major">
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Integration</li>
</ul>
</div>
<div class="sub-menu-links">
<div class="sub-menu">
<h6>CREATE</h6>
<ul>
<li>Recording</li>
<li>Hosting</li>
<li>Collaboration</li>
<li>Management</li>
</ul>
</div>
<div class="sub-menu">
<h6>PRESENT</h6>
<ul>
<li>Player</li>
<li>Embedding</li>
<li>Interactivity</li>
<li>Channels</li>
</ul>
</div>
<div class="sub-menu">
<h6>GROW</h6>
<ul>
<li>SEO</li>
<li>Subscribers</li>
<li>Reach & retarget</li>
<li>Analytics</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-link">
Learning Center <i class="fas fa-chevron-down"></i>
</li>
<li class="main-link">
Podcasts & Series <i class="fas fa-chevron-down"></i>
</li>
<li class="main-link">
About <i class="fas fa-chevron-down"></i>
</li>
</ul>
</div>
</div>
<div class="buttons">
Sign In
Get Started
</div>
</div>
</nav>
<script src="./app.js"></script>
</body>
</html>
It can be done with only css
To change icon(chevron) in dropdown menu.
nav .container .links .menu ul .main-link:hover i {
transform: rotateX(180deg);
}
nav .container .links .menu ul .main-link i {
transform: rotateX(0deg);
}
To hover the show dropdown contents
nav .container .links .menu ul .main-link:hover .dropdown {
display: flex;
}
nav .container .links .menu ul .main-link .dropdown {
display: none;
}
:root {
--font1: roboto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
width: 100%;
height: 70px;
border-bottom: 1px solid #ddd;
font-family: var(--font1);
}
nav .container {
width: 1340px;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
nav .container .links {
display: flex;
align-items: center;
}
nav .container .links .menu {
margin-left: 32px;
}
nav .container .links .menu ul .main-link {
list-style: none;
display: inline-block;
margin-right: 24px;
cursor: pointer;
}
nav .container .links .menu ul .main-link:hover i {
transform: rotateX(180deg);
}
nav .container .links .menu ul .main-link i {
transform: rotateX(0deg);
}
nav .container .links .menu ul .main-link .dropdown {
width: 1340px;
position: absolute;
top: 100%;
left: 0;
padding: 32px 0;
cursor: initial;
display: none;
border-bottom: 1px solid #ddd;
}
nav .container .links .menu ul .main-link:hover .dropdown {
display: flex;
}
nav .container .links .menu ul .main-link .dropdown .cta {
width: 300px;
padding-right: 16px;
}
nav .container .links .menu ul .main-link .dropdown .cta h4 {
color: #3ea9f5;
font-size: 30px;
}
nav .container .links .menu ul .main-link .dropdown .cta p {
color: #505050;
margin-bottom: 32px;
margin-top: 24px;
}
nav .container .links .menu ul .main-link .dropdown .cta a {
color: #fff;
background-color: #3ea9f5;
padding: 12px 32px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
display: inline-block;
}
nav .container .links .menu ul .main-link .dropdown .cta a:focus {
outline: none;
}
nav .container .links .menu ul .main-link .dropdown .major {
width: 150px;
}
nav .container .links .menu ul .main-link .dropdown .major ul li {
display: block;
margin-bottom: 8px;
}
nav .container .links .menu ul .main-link .dropdown .major ul li a {
color: #505050;
font-weight: 700;
text-decoration: none;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links {
display: flex;
}
nav .container .links .menu ul .main-link .dropdown .sub-menu-links .sub-menu {
margin-right: 20px;
width: 150px;
}
nav
.container
.links
.menu
ul
.main-link
.dropdown
.sub-menu-links
.sub-menu
h6 {
font-weight: bold;
color: #a7afba;
font-size: 14px;
margin-bottom: 12px;
}
nav
.container
.links
.menu
ul
.main-link
.dropdown
.sub-menu-links
.sub-menu
ul
li {
display: block;
list-style: none;
margin-bottom: 8px;
}
nav
.container
.links
.menu
ul
.main-link
.dropdown
.sub-menu-links
.sub-menu
ul
li
a {
font-size: 15px;
text-decoration: none;
color: #505050;
}
nav .container .links .menu ul .main-link i {
font-size: 12px;
}
nav .container .links .logo h3 {
font-size: 36px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar wistia</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7e5d687fd9.js"
crossorigin="anonymous"
></script>
</head>
<body>
<nav>
<div class="container">
<div class="links">
<div class="logo">
<h3>WISTIA</h3>
</div>
<div class="menu">
<ul>
<li
class="main-link"
>
Product <i class="fas fa-chevron-down"></i>
<div class="dropdown">
<div class="cta">
<h4>Product</h4>
<p>
Use our software and your videos to grow your business.
</p>
Start for free
</div>
<div class="major">
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Integration</li>
</ul>
</div>
<div class="sub-menu-links">
<div class="sub-menu">
<h6>CREATE</h6>
<ul>
<li>Recording</li>
<li>Hosting</li>
<li>Collaboration</li>
<li>Management</li>
</ul>
</div>
<div class="sub-menu">
<h6>PRESENT</h6>
<ul>
<li>Player</li>
<li>Embedding</li>
<li>Interactivity</li>
<li>Channels</li>
</ul>
</div>
<div class="sub-menu">
<h6>GROW</h6>
<ul>
<li>SEO</li>
<li>Subscribers</li>
<li>Reach & retarget</li>
<li>Analytics</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-link">
Learning Center <i class="fas fa-chevron-down"></i>
<div class="dropdown">
<div class="cta">
<h4>Learning Center</h4>
<p>
Use our software and your videos to grow your business.
</p>
Start for free
</div>
<div class="major">
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Integration</li>
</ul>
</div>
<div class="sub-menu-links">
<div class="sub-menu">
<h6>CREATE</h6>
<ul>
<li>Recording</li>
<li>Hosting</li>
<li>Collaboration</li>
<li>Management</li>
</ul>
</div>
<div class="sub-menu">
<h6>PRESENT</h6>
<ul>
<li>Player</li>
<li>Embedding</li>
<li>Interactivity</li>
<li>Channels</li>
</ul>
</div>
<div class="sub-menu">
<h6>GROW</h6>
<ul>
<li>SEO</li>
<li>Subscribers</li>
<li>Reach & retarget</li>
<li>Analytics</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-link">
Podcasts & Series <i class="fas fa-chevron-down"></i>
<div class="dropdown">
<div class="cta">
<h4>Podcasts & Series</h4>
<p>
Use our software and your videos to grow your business.
</p>
Start for free
</div>
<div class="major">
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Integration</li>
</ul>
</div>
<div class="sub-menu-links">
<div class="sub-menu">
<h6>CREATE</h6>
<ul>
<li>Recording</li>
<li>Hosting</li>
<li>Collaboration</li>
<li>Management</li>
</ul>
</div>
<div class="sub-menu">
<h6>PRESENT</h6>
<ul>
<li>Player</li>
<li>Embedding</li>
<li>Interactivity</li>
<li>Channels</li>
</ul>
</div>
<div class="sub-menu">
<h6>GROW</h6>
<ul>
<li>SEO</li>
<li>Subscribers</li>
<li>Reach & retarget</li>
<li>Analytics</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-link">
About <i class="fas fa-chevron-down"></i>
<div class="dropdown">
<div class="cta">
<h4>About</h4>
<p>
Use our software and your videos to grow your business.
</p>
Start for free
</div>
<div class="major">
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Integration</li>
</ul>
</div>
<div class="sub-menu-links">
<div class="sub-menu">
<h6>CREATE</h6>
<ul>
<li>Recording</li>
<li>Hosting</li>
<li>Collaboration</li>
<li>Management</li>
</ul>
</div>
<div class="sub-menu">
<h6>PRESENT</h6>
<ul>
<li>Player</li>
<li>Embedding</li>
<li>Interactivity</li>
<li>Channels</li>
</ul>
</div>
<div class="sub-menu">
<h6>GROW</h6>
<ul>
<li>SEO</li>
<li>Subscribers</li>
<li>Reach & retarget</li>
<li>Analytics</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="buttons">
Sign In
Get Started
</div>
</div>
</nav>
<script src="./app.js"></script>
</body>
</html>
Hello I am creating a website navigation menu. I have implemented a drop down option to one of my links but it is not displaying at all. I am sure this is a simple fix that I am overlooking, any help is appreciated.
I have only included relevant HTML and CSS code. Thanks!
HTML:
<nav onmouseout="hide()">
<ul id="navMenu">
<li>Home</li>
<li><span onmouseover="show(about)">About Us</span>
<div id="about" onmouseover="show(about)" style="visibilty:hidden;">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
visibility: hidden;
}
#navMenu div a {
display: block;
width: 500px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu div:hover {
display: block;
background-color: #7e8182;
}
You can do this using CSS, no need to use javaScript. Check updated snippet below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
display: none;
background-color: #7e8182;
}
#navMenu div a {
display: block;
width: 200px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu li:hover div{
display: block;
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><span>About Us</span>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
No need if JS, just pure CSS. Hope this helps ;)
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul div
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul div li
{
float:none;
width:200px
}
nav ul div a
{
line-height:120%;
padding:10px 15px
}
nav ul li:hover > div
{
display:block
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><a>About Us</a>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
I have a menubar on top of my page which show sub-menus when clicked and I want to make disappear the sub-menu on click of anywhere in the page. So far i did code to display sub-menu on click of my menu. Below is the code for the same!
Can somebody help me with the existing code to close sub-menu part on click of anywhere in the page?
Many thanks in advance!
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
$(this).find('ul.submenu').css('transition', '1s');
//$(this).find('div.divsubsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open);
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
width: 800px;
height: 30px;
background-color: #191919;
margin-top: 10px;
position: relative;
font-size: 12px;
font-family: Verdana;
margin: auto;
text-align: center;
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a.MenuLink {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
border: double #161718;
border-width: 1.3px;
border-top: none;
border-bottom: none;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
background-color: black;
text-decoration: none;
transition: 0.3s;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
font-size: 15px;
font-weight: bold;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
width: 800px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: block;
color: #00537F;
font-weight: bold;
padding: 4px 8px;
}
#topnav ul.submenu>li:hover>a {
background-color: black;
color: white;
}
#topnav ul div {
visibility: hidden;
}
#topnav li:hover ul div.divsubsubmenu {
visibility: hidden;
}
#topnav li li:hover div.divsubsubmenu {
visibility: visible;
opacity: 1;
z-index: 1;
}
#topnav div.divsubsubmenu {
height: 50px;
background: black;
color: white;
float: left;
left: 0;
width: 800px;
position: absolute;
}
#topnav div.divsubsubmenu>ul>li:hover>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="topnav">
<ul>
<li>
<a class="MenuLink" href="#">Admin</a>
</li>
<li>
<a class="MenuLink" href="#"> MAC </a>
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<div class="divsubsubmenu">
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</div>
</li>
<li>
Admin Data
</li>
</ul>
</li>
<li>
<a class="MenuLink" href="#">TPC </a>
<ul class="submenu">
<li>TPC1</li>
<li>TPC2</li>
</li>
</ul>
</div>
</body>
Just add this small code in your javascript:
$("body").on('click', function(e){
var element = e.target.tagName;
if(element !== 'A') {
$("#topnav ul li ul.submenu").css('display', 'none');
}
});
Hope this may help you.
I have to make dropdown always align center, according to the parent tag. Any help would be greatly appreciated.
The example is given below:
Fiddle Link: http://jsfiddle.net/abidkhanweb/ojxpt4m2/
You can do something like this:
#menu {
border-bottom: 1px solid #DDD;
color: #fff;
display: block;
float: right;
height: 18pt;
line-height: 18pt;
list-style-type: none;
text-transform: uppercase;
width: 100%;
font-size:14px;
position:absolute;
}
#menu > li{
background-color: #003399;
border: 1px solid #DDD;
margin-top:-1px;
float: right;
position: relative;
margin-left: 1%;
padding-left: 2%;
padding-right: 2%;
}
#menu li:hover {
opacity: 0.8;
}
#menu li .wrapper .submenu {
display: block;
margin-left: 50%;
width:100%;
}
#menu li .wrapper {
display: block;
position: absolute;
top: 19pt;
right: 50%; /*this will center the div*/
white-space: nowrap;
}
#menu li:hover .wrapper .submenu {
display: block;
}
.submenu li {
display: inline-block;
padding-left: 1.5%;
white-space: nowrap;
opacity: 0.7;
}
.submenu li a {
padding-right: 3%;
padding-left: 3%;
background-color: #000;
display: inline-block;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
color:#C37000;
padding:1px 5px;
border-collapse:collapse;
font-weight:bold;
text-decoration:none;
margin:0;
}
.topmenu ul{
display:none;
}
.submenu a{
padding:1px 5px;
border:1px solid #C37000;
border-collapse:collapse;
color:#C37000;
font-weight:bold;
text-decoration:none;
background-color:#7F4800;
margin:0;
width:100%;
}
.submenu a:hover {
color:#4C4C4C;
background-color:#ffddbb !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
<ul id="menu">
<li class="topmenu">Menu 1</li>
<li class="topmenu">Menu 2
</li>
<li class="topmenu">Policies
<div class="wrapper">
<ul >
<li class="submenu"><a>Field 1</a></li>
<li class="submenu"><a>Field 2</a></li>
<li class="submenu"><a>Field 3</a></li>
<li class="submenu"><a>Field 4</a></li>
</ul>
</div>
</li>
<li class="topmenu">Menu 4</li>
</ul>
I assume you have applied position: absolute to the dropdown, for you to position it to the left, set the left property to the value of your padding for the policies container like so:
nav {
background: orange;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
position: relative;
top: 0;
left: 0;
margin-left: 50px;
}
nav > ul > li > a {
display: inline-block;
color: white;
text-decoration: none;
padding: 5px 10px;
background: green;
}
nav > ul ul {
background: #eee;
border: 1px solid #000;
padding: 10px;
position: absolute;
left: -10px;
}
<nav>
<ul>
<li>Policies
<ul>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
</ul>
</li>
</ul>
</nav>
Can you please take a look at this demo and let me know how I can force the .droper to be slide down until the mouse is still over all child <li> s?
As you can see from the demo the .droper starts to slide up as soon as the mouse is out of the .menu-itemb (which make sence to me!) but I need to keep it available until user is browsing on the dropdown menu
$(document).ready(function(){
$(".menu-itemb").mouseover(function(){
$(".droper").stop().slideDown("slow");
});
$(".menu-itemb").mouseout(function(){
$(".droper").slideUp("slow");
});
});
body {
background: #1f1f1f;
}
.site-navigation {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
font-weight: bold;
margin: 40px;
}
.site-navigation ul {
background: #3498DB;
list-style: none;
margin: 0;
padding-left: 0;
}
.site-navigation li {
color: #fff;
background: #3498DB;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
#include transition(background, 0.2s);
background: #52a6df;
cursor: pointer;
}
.site-navigation ul li ul {
background: #52a6df;
display:none;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #74b7e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<nav id="navigation" class="site-navigation" role="navigation">
<ul class="menu">
<li class="menu-item">News</li>
<li class="menu-itemb">Snippets
<ul class="droper">
<li class="menu-item sub-menu">CSS</li>
<li class="menu-item sub-menu">HTML</li>
<li class="menu-item sub-menu">jQuery</li>
<li class="menu-item sub-menu">PHP</li>
<li class="menu-item sub-menu">WordPress</li>
</ul>
</li>
<li class="menu-item">Inspiration</li>
<li class="menu-item">Tools</li>
<li class="menu-item">Tutorials</li>
</ul>
</nav>
You are missing one .stop() before the slideUp. Without it, the animation will be triggered and executed to the end when you move the mouse between the items...
$(document).ready(function(){
$(".menu-itemb").mouseover(function(){
$(".droper").stop().slideDown("slow");
});
$(".menu-itemb").mouseout(function(){
$(".droper").stop().slideUp("slow");
});
});
body {
background: #1f1f1f;
}
.site-navigation {
display: block;
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
font-weight: bold;
margin: 40px;
}
.site-navigation ul {
background: #3498DB;
list-style: none;
margin: 0;
padding-left: 0;
}
.site-navigation li {
color: #fff;
background: #3498DB;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
#include transition(background, 0.2s);
background: #52a6df;
cursor: pointer;
}
.site-navigation ul li ul {
background: #52a6df;
display:none;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #74b7e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<nav id="navigation" class="site-navigation" role="navigation">
<ul class="menu">
<li class="menu-item">News</li>
<li class="menu-itemb">Snippets
<ul class="droper">
<li class="menu-item sub-menu">CSS</li>
<li class="menu-item sub-menu">HTML</li>
<li class="menu-item sub-menu">jQuery</li>
<li class="menu-item sub-menu">PHP</li>
<li class="menu-item sub-menu">WordPress</li>
</ul>
</li>
<li class="menu-item">Inspiration</li>
<li class="menu-item">Tools</li>
<li class="menu-item">Tutorials</li>
</ul>
</nav>
This should fix what your problems.
Fiddle
$(".menu-itemb").on('mouseenter', function () {
$(".droper").stop().slideDown("200");
});
$(".menu-itemb").on('mouseleave', function () {
$(".droper").stop().slideUp("200");
});