I can't get my child <ul> to display properly. When the dropdown is open, it displays underneath the rest of the menu. What I want is the rest of the <li> to move down to make room for the dropdown.
HTML:
<ul class="nav">
<li>One</li>
<li>Two
<ul>
<li>Two One</li>
<li>Two Two</li>
</ul>
</li>
<li>
Three
<ul>
<li>Four</li>
<li>Five</li>
</ul>
</li>
</ul>
CSS:
.nav {
width: 250px;
font-size: 18px;
color: white;
list-style: none;
display: block;
z-index: 2;
}
.nav li {
background-color: #000;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav li:hover {
background-color: #008cba;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
}
.nav ul li {
background-color: #cccccc;
color: #000;
border-bottom: #464646 solid 1px;
}
.nav ul li:hover {
background-color: #464646;
}
.active {
display: initial!important;
tranistion: 0.5s;
}
jQuery:
$(document).ready(function() {
$("ul.nav li ").click(function() {
$(this).find("ul").toggleClass("active");
});
});
You should:
Add "position: relative" to your ".nav ul"
Remove "height: 40px" from your ".nav li"
Change in your ".active" class from "display: initial !important" to "display: block !important"
Here are the relevant classes:
.nav li {
background-color: #000;
display: block;
line-height: 40px;
text-align: center;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
position: relative;
}
.active {
display: block !important;
transition: 0.5s;
}
Related
I have a link that is placed in li and when you hover on it, a block should appear with links that I will indicate in it
<li id="dropdown" class="li">
Lessons
</li>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
Are u expecting like this:
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: #5c8ff6;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: black;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Lessons
<ul class="dropdown">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
</li>
</ul>
</nav>
Do you mean a dropdown menu like this? https://www.w3schools.com/css/css_dropdowns.asp
The example on the website
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
I have just created a responsive toggle navigation bar. Everything is working fine, just one problem is that it is not toggling properly as it should.
Dropdown menu can be seen when it on mouse click, and as soon as I release the mouse click, the dropdown menu disappears (refer http://testpage187.tumblr.com/). It's happening for both Desktop and Mobile (as it is responsive, I think it will work as same for both). I think the problem is with the javascript code. Please look into it. I am attaching my codes here. Thank you in advance.
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
})
body {
margin: 0;
padding: 0;
width: 100%;
font-family: sans-serif;
}
header {
position: absolute;
top: 50px;
left: 0px;
padding: 0 100px;
background: #262626;
width: 100%;
box-sizing: border-box;
}
header .logo {
color: #fff;
float: left;
height: 50px;
line-height: 50px;
font-size: 24px;
font-weight: bold;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: block;
}
header nav ul li {
list-style: none;
display: inline;
position: relative;
}
header nav ul li.sub-menu:before {
content: '\f0d7';
font-family: 'fontAwesome';
position: absolute;
line-height: 50px;
color: #fff;
right: 5px;
}
header nav ul li.active.sub-menu:before {
content: '\f0d8';
}
header nav ul li ul {
position: absolute;
left: 0;
top: 33px;
background: #333;
display: none;
}
header nav ul li:active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: 200px;
}
header nav ul li ul li a {
display: inline-block;
}
header nav ul li a {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: inline-block;
}
header nav ul li a:hover,
header nav ul li a:active {
background: #2196f3;
}
.menu-toggle {
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
#media screen and (max-width: 800px) {
header {
padding: 0 20px;
}
.menu-toggle {
display: block;
}
header nav {
position: absolute;
width: 100%;
height: calc(100vh - 50px);
background: #333;
top: 50px;
left: -100%;
transition: 0.5s;
}
header nav.active {
left: 0;
top: 50px;
}
header nav ul {
width: 100%;
display: block;
text-align: center;
}
header nav ul li {
width: 100%;
display: block;
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
header nav ul li a {
display: block;
}
header nav ul li.active ul {
position: relative;
background: #003e6f;
}
header nav ul li ul li {
width: 100%;
text-align: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<header>
<div class="logo">LOGO</div>
<nav>
<ul>
<li>Home</li>
<li>Trending</li>
<li>Popular</li>
<li>New <i class="fas fa-caret-down"></i>
<ul>
<li>New 1</li>
<li>New 2</li>
<li>New 3</li>
<li>New 4</li>
<li>New 5</li>
</ul>
</li>
<li>Contact <i class="fas fa-caret-down"></i>
<ul>
<li>Contact 1</li>
<li>Contact 2</li>
<li>Contact 3</li>
<li>Contact 4</li>
</ul>
</li>
<li>About</li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
Here's the solution:
You had a problem in the CSS. You were adding a "state" :active instead of a class .active on the siblings.
CSS problem:
header nav ul li a:hover,
header nav ul li a:active {
background:#2196f3;
}
header nav ul li:active ul{
display:block;
}
CSS Solution:
header nav ul li a:hover,
header nav ul li a.active {
background:#2196f3;
}
header nav ul li.active ul{
display:block;
}
And also I fixed a top displacement.
Here's the fiddle: Toggle solution
One simple css class as solution
add below to your style.
header nav ul li:hover > ul {
display: block;
}
then remove all scripts
Visuals speak for themselves:
/* GENERAL STYLE */
#nav {
background: green;
height: 50px;
width: 100%;
}
/* Category red */
.category{
position: relative;
background: red;
}
/* highlight category items on hover */
.category:hover {
background-color: blue;
}
/* float and size li's */
#nav li {
float: left;
line-height: 50px;
padding: 0 10px;
margin-top:-1px;
border: 1px solid white;
}
/* default off */
ul,
li {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
}
/* a default off */
a {
text-decoration: none;
color: #fff;
}
/* hover effect */
li:hover{
opacity: 0.6;
}
/* GENERAL STYLE END */
/* hide dropdowns */
.dropdown {
display: none;
position: absolute;
background: yellow;
padding: 10px;
}
.category:hover>.dropdown{
display: block;
}
/* #nav ul li > ul > li */
.dropdown li{
position: relative;
background: orange;
margin: 0;
padding: 0;
text-align: center;
text-transform: capitalize;
}
.dropdown-subcategory{
white-space:nowrap;
}
/* #nav ul li > ul > li > ul */
.dropdown-subcategory .dropdown{
display: none;
position: absolute;
left:110%;
background: red;
text-align: center;
top: 0;
}
.dropdown li:hover ul {
display: block;
}
#nav .subcategory-item {
background: green;
color: #000;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
<div id="nav">
<ul>
<li class="category">
<a>Category</a>
<ul class="dropdown">
<li class="dropdown-subcategory">
<a>Category Item 1</a>
<ul class="dropdown">
<li class="subcategory-item"><a>Subcategory Item 1</a></li>
<li class="subcategory-item"><a>Subcategory Item 2</a></li>
<li class="subcategory-item"><a>Subcategory Item 3</a></li>
<li class="subcategory-item"><a>Subcategory Item 4</a></li>
</ul>
</li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
</ul>
</li>
</ul>
</div>
I want to hover from Category Item 1 to Subcategory Item 1, but submenu dropdown disappears when I try to move cursor to it. When you move mouse fast, submenu stays, but I think it is not wise to expect such level of dexterity from the user.
How to make submenu dropdown stay with CSS without deleting padding on .dropdown class?
Look at my code snippet!
Changing .dropdown-subcategory .dropdown property left to 100% does the job!
I delete the padding of 10px on the li also for presentational purpose, you dont have to. Be sure that you use margin and padding on the li to get the best results.
/* GENERAL STYLE */
#nav {
background: green;
height: 50px;
width: 100%;
}
/* Category red */
.category{
padding: 0 10px;
position: relative;
background: red;
}
/* highlight category items on hover */
.category:hover {
background-color: blue;
}
/* float and size li's */
#nav li {
float: left;
line-height: 50px;
margin-top:-1px;
border: 1px solid white;
}
/* default off */
ul,
li {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
}
/* a default off */
a {
text-decoration: none;
color: #fff;
}
/* hover effect */
li:hover{
opacity: 0.6;
}
/* GENERAL STYLE END */
/* hide dropdowns */
.dropdown {
display: none;
position: absolute;
}
.category:hover>.dropdown{
display: block;
}
/* #nav ul li > ul > li */
.dropdown li{
position: relative;
background: yellow;
}
.dropdown li a {
margin-top: -10px;
margin-bottom: -10px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
background: orange;
}
.dropdown li.subcategory-item a {
margin-top: -10px;
margin-bottom: -10px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
background: blue;
}
.dropdown-subcategory{
white-space:nowrap;
}
/* #nav ul li > ul > li > ul */
.dropdown-subcategory .dropdown{
display: none;
position: absolute;
left:100%;
top: 0%;
background: red;
text-align: center;
border: none;
}
.dropdown-subcategory .subcategory-item a{
background: green;
}
.dropdown li:hover ul {
display: block;
}
#nav .subcategory-item {
background: green;
color: #000;
position: relative;
width: 100%;
}
<div id="nav">
<ul>
<li class="category">
<a>Category</a>
<ul class="dropdown">
<li class="dropdown-subcategory">
<a>Category Item 1</a>
<ul class="dropdown">
<li class="subcategory-item"><a>Subcategory Item 1</a></li>
<li class="subcategory-item"><a>Subcategory Item 2</a></li>
<li class="subcategory-item"><a>Subcategory Item 3</a></li>
<li class="subcategory-item"><a>Subcategory Item 4</a></li>
</ul>
</li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
</ul>
</li>
</ul>
</div>
Here's the fiddle for my query
https://jsfiddle.net/e7te8hf1/
<section id="action-bar">
<div id="logo">
<img src="img/logo.png">
</div><!-- end logo -->
<nav class="navbar navigation main-navigation">
<ul class='menu main-menu'>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Women'>Women</span>
</a>
<ul>
<li>
Casuals
<ul>
<li>Tops</li>
<li>Bottoms</li>
<li>Suits</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Formals</li>
<li>
Prints
<ul>
<li>Stitched</li>
</ul>
</li>
<li>Anokhee</li>
<li>Abbayas</li>
<li>
Accessories
<ul>
<li>Bags</li>
<li>Pouch</li>
<li>Dupatta</li>
<li>Stole</li>
<li>Clutches</li>
</ul>
</li>
</ul>
</li>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Men'>Men</span>
</a>
<ul>
<li>
Casual
<ul>
<li>Tops</li>
<li>Bottoms</li>
<li>Suits</li>
</ul>
</li>
<li>Formal</li>
</ul>
</li>
<li class='menu-item'><span title='Look Book'>Look Book</span></li>
<li class='menu-item'><span title='Stores'>Stores</span></li>
<li class='menu-item'><span title='Contact'>Contact</span></li>
</ul>
</nav>
</section>
and the CSS is
#action-bar .navbar {
float: left;
}
#action-bar nav ul ul {
display: none;
}
#action-bar nav ul li:hover > ul {
display: block;
}
#action-bar nav ul {
background: #fff;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0;
text-align: center;
font-size: 15px;
font-family:'Oswald', sans-serif;
font-weight: bold;
}
#action-bar nav ul:after {
content:"";
clear: both;
display: block;
}
#action-bar nav ul li {
float: left;
}
#action-bar nav ul li:hover {
background: #6f100d;
}
#action-bar nav ul li a {
display: block;
color: #757575;
text-decoration: none;
border-right: 1px solid #E5E5E6;
border-bottom: 1px solid #E5E5E6;
transition: .8s background-color;
}
#action-bar nav ul li a:hover {
color: #fff;
}
#action-bar nav ul ul {
background: #fff;
padding: 0;
position: absolute;
top: 100%;
}
#action-bar nav ul ul li a {
color: black;
}
#action-bar nav ul ul li {
float: none;
position: relative;
}
#action-bar nav ul ul li a {
padding: 15px 40px;
color: black;
}
#action-bar nav ul ul li a:hover {
background: #6ABED6;
color: #fff;
}
#action-bar nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
#action-bar nav ul li:hover > a {
color: #fff;
}
#action-bar #view-cart {
float: right;
display: inline-block;
padding-top: 18px;
padding-left: 5px;
}
#action-bar #user-menu {
display: inline-block;
padding-left: 160px;
}
.menu .menu-item {
display: inline-block;
margin: 0;
padding: 0;
}
.main-menu .menu-item a {
color: #fff;
display: block;
text-decoration: none;
font-family:'Oswald:500', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
background: #fff;
}
.three-d span, .three-d span::before, .three-d span::after {
display: block;
transition: all .3s ease-out;
transform-style: preserve-3d;
}
.three-d {
position: relative;
cursor: pointer;
transition: all .07s linear;
}
.three-d span {
display: block;
padding: 18px 35px;
perspective: -200px;
}
.three-d span::before, .three-d span::after {
padding: 18px 35px;
content: attr(title);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
box-sizing: border-box;
}
.three-d span::before {
transform: rotateX(0deg) translateZ(25px);
}
.three-d span::after {
transform: rotateX(-90deg) translateZ(25px);
background: #6f100d;
color: #f9f9f9;
}
.three-d:hover span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
I want the main-menu to retain the hover style when I hover over the sub-menu, using CSS, but I am unable to achieve that.
Can anyone please help?
Change the last block of CSS...
.three-d:hover span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
to this...
li:hover .three-d span, .three-d:focus span {
transform: translateZ(-25px) rotateX(90deg);
}
and change the rest of your a:hover { selectors to li:hover > a {
JSFIDDLE
I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.