I have a css menu in Wordpress with 3 levels, and the problem is that the level below the menu level2 with level 3 opened can't be reached on hover (the complete 2nd level menu closes).
Any help please?
My code is:
<div class="nav">
<ul>
<li>Main-menu
<ul class="sub-menu">
<li>Sub-item</li>
<li>Second-submenu
<ul class="sub-menu">
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</li>
<li>Last-sub-menu
<ul class="sub-menu">
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</li>
</ul>
</li>
<li>Second-item</li>
</ul>
</div>
And the css:
.nav { font-size:1.4em; }
.nav ul { padding:0; margin: 0; background: #0A488E; }
.nav ul li { display:inline-block; margin-right:5%; }
.nav ul li a { color:white; }
.nav li ul.sub-menu {
display: none;
position: absolute;
padding: 7px 21px;
padding-left: 21px;
text-align: left;
margin-left: -21px;
background: #0A488E;
font-size: 0.9em;
z-index: 100;
}
.nav li:hover > ul.sub-menu, .nav li ul.sub-menu li:hover > ul.sub-menu {
display: block;
}
.nav li ul.sub-menu li {
display:block;
margin: 9px 0;
}
.nav li ul.sub-menu li ul.sub-menu {
position: relative;
padding: 0 5%;
}
The fiddle is here: https://jsfiddle.net/f7ny3s3r/2/
(The Last sub-menu is the problematic one)
Thank you for the help!
Based on what you are asking for, I fixed it here -
https://jsfiddle.net/f7ny3s3r/7/
Instead of display: none into display block. You can keep it block and use height and opacity with a transition. This will solve your problem, and add animation.
So instead of :
.nav li ul.sub-menu {
display: none;
Use:
.nav li ul.sub-menu {
transition: 0.5s all;
display: block;
height: 0;
opacity:0;
And
.nav li:hover > ul.sub-menu, .nav li ul.sub-menu li:hover > ul.sub-menu {
height: auto;
opacity:1;
}
You can change the transition to whatever you want, including a delay (or no transition at all).
Related
I am using this template that doesn't support sub menu natively but i really like its design: zStartup
The HTML structure of my menu is:
<div id="menu">
<nav>
<div class="wrap-nav">
<ul>
<li>Home</li>
<li>Projects
<ul class="sub-menu">
<li>Blog</li>
<li>Services
<ul class="sub-menu">
<li>ONE</li>
<li>TWO</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
The CSS for submenu-less version, as in the template is:
nav {
display: inline-block;
z-index: 1111;
position: relative;
float: right;
}
ul.menu {
margin: 28px 10px 0px 0px;
display: inline-block;
}
ul.menu li {
float: left;
line-height: 30px;
margin: 0px 0px 0px 48px;
}
ul.menu li:hover,
ul.menu li.current {} ul.menu li a {
font-size: 25px;
line-height: 30px;
color: #f2f2f2;
display: inline-block;
}
ul.menu li a:hover,
ul.menu li.current a {
color: #ff9000;
}
I added the following to accomodate the submenu with unwanted effects as shown in the pictures:
ul.menu li ul { display:none; list-style:none;top:30px; left:auto; float:right; text-align:left;position:relative; width:200px !important; border:1px solid blue;z-index:10000; }
ul.menu li:hover > .sub-menu { display:block; }
.sub-menu li {display:block;}
.sub-menu li a {
display:block; height:40px;font-size: 0.89em;padding:5px 30px;
}
The width:200px was a desperate move as it refused to show the submenu vertically (i assumed display:block would do the trick).
Anyway, the above codes shows the following result, which is ugly:
Any input?
You have several issues in your code. Here are a couple of informations that can help you:
Rule #1: Always format your code properly. Trust me that will make a difference!
You are using a menu class in your css but there is none in your html (it's an id not a class).
I show you below the mechanism of sub-menu in pure css, with that you'll have everything you need to make yours.
ul {
/* We are removing default styles of ul */
list-style: none;
padding: 0;
margin: 0;
}
ul li {
/* Applies to all li */
display: block;
float: left;
position: relative; /* this will make the sub-menu positionned relatived to the hovered li */
}
ul li + li {
margin-left: 28px; /* just to space your li */
}
li ul {
display: none; /* Hides the submenu */
text-align: right; /* Display sub-menu text on the right */
}
ul li a {
/* Your styles for the links here I let browser's defaults */
}
ul li a:hover {
/* Your styles for the links when hovered */
color: #ff9000;
}
li ul li + li {
margin-left: 0; /* Remove the margin between li that we applied above */
}
li:hover > ul {
display: block; /* On hover show sub-menu */
position: absolute;
}
li:hover li {
float: none; /* Remove floating for sub-menu li so that li displays one above the other */
}
ul ul ul {
right: 100%; /* position sub-menu of sub-menu to the left of the parent submenu */
top: 0;
}
ul ul ul li {
margin-right: 8px; /* Just so that li inside submenu of submenu don't touch parent submenu's li (it depends on the style you want for your menu) */
}
ul::after {
/* Clearfix because we've used float on ul */
content: '';
display: block;
clear: both;
}
<nav>
<ul>
<li>Home</li>
<li>Projects
<ul class="sub-menu">
<li>Blog</li>
<li>Services
<ul class="sub-menu">
<li>ONE</li>
<li>TWO</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
I have created a dropdown list using css. The drop down list works perfect, opening the menu to down. How can I modified in order to open the menu to up (opposite direction)? make something like drop up list.
This is my html code.
<div id="menu">
<ul>
<li> <?php echo $user_data['name']; ?>
<ul>
<li>Logout</li>
<li>Change Password<li>
<li>Settings<li>
</ul>
</li>
<li> Profile
<ul>
<li>Edit Profile</li>
<li>View Profile</li>
</ul>
</li>
<li> Home </li>
</ul>
</div>
and this is my css.
#menu ul{
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li {
float:left;
}
#menu ul li a:hover{
background:#fff;
color:#333;
}
#menu ul li ul{
position:absolute;
height:0px;
overflow:hidden;
}
#menu ul li ul li{
float:none;
}
#menu ul li:hover ul{
overflow:visible;
}
#menu ul li:hover ul li a{
padding:10px;
}
#menu ul li ul li a{
-webkit-transition:0.3s;
-moz-transition:0.3s;
padding: 0px 10px;
}
http://codepen.io/bjornmeansbear/pen/MwGYZL
The following CSS should help you — it incorporates the "drop-up" and also cleans up a few other things...
#menu {
margin-top: 100px;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu > ul > li {
float: left;
margin: 10px;
position: relative;
}
#menu a { display: block;}
#menu a:hover {
background: #fff;
color: #333;
}
#menu ul li ul {
position: absolute;
height: 0px;
width: 250%;
overflow: hidden;
}
#menu ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
#menu li li a {
padding: 5px 10px;
}
#menu a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
padding: 0px 10px;
}
Basically, if you position the <li> that houses the child <ul> relatively, you can use the absolute position of the <ul> to position it anywhere based directly on its the parent... does that make sense?
I have horizontal menu with 2 sub level. When i move down i would like to keep the Top level menu in hover state.
I have create jsfiddle. link to the JsFiddle
Html Code is :
<div>
<ul id="nav">
<li>Home</li>
<li>Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And Css code is
> body {
}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
opacity:1;
}
/* Targeting the first level menu */
#nav {
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
Can somebody guide me how to do that?
Thanks.
Change the selector from
#nav > li > a:hover
to
#nav > li:hover > a
And
#nav li ul li a:hover
to
#nav li ul li:hover > a
This menu is a multi-level horizontal menu. I am trying to make a 3nd level submenu to become vertical (1st & 2nd level would stay as horizontal)
So if I hover Products, it will list Harddrives, Monitors, and Speakers... horizontally. However, when I hover the Speakers, it now should list 10 Walt, 20 Walt... verticallly like a dropdown list.
Can this be done? Please help.
<style>
/**
* horizontal navigation (SO)
*/
body {
background: url('.jpg') 50% 50%;
}
/* Targeting both first and second level menus */
#nav {position: relative;}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
<!-- content to be placed inside <body>…</body> -->
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
jsFiddle Demo: http://jsfiddle.net/fJQ59/
Add to your style following codes
#nav li ul li ul li { display: block; float: none; }
Here's a starting point for you:
HTML
<ul>
<li>
Option One
<ul>
<li>
Second Row One
<ul>
<li>
Third Row One
</li>
<li>
Third Row Two
</li>
<li>
Third Row Three
</li>
</ul>
</li>
<li>
Second Row Two
</li>
</ul>
</li>
<li>
Option Two
</li>
<li>
Option Three
</li>
</ul>
CSS
ul {
width: 600px;
list-style-type: none;
}
ul > li,
ul > li > ul > li {
position: relative;
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
float: none;
}
li > ul {
display: none;
}
li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
View on JSFiddle
Fiddle here: http://jsfiddle.net/csaltyj/3A78u/
I want the sub-sub nav menu to align with the top of its parent (hence top: 0) but it aligns with the parent's parent for some reason. I'm not sure what's going on.. any ideas?
HTML:
<div id="nav">
<ul>
<li><a>Item One</a></li>
<li><a>Item Two</a>
<ul>
<li><a>Item two has babies</a></li>
<li><a>Baby #2</a>
<ul>
<li><a>Sub-babies</a></li>
<li><a>This is fun</a></li>
<li><a>Last Item</a></li>
</ul>
</li>
<li><a>SubSub</a>
<ul>
<li><a>Another Item</a></li>
<li><a>Another!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#nav {
height: 40px;
}
#nav ul {
list-style: none;
font-family: Arial, sans-serif;
font-size: 0.8em;
}
/* When mousing over any LI, reveal its UL if any */
#nav > ul li:hover > ul {
display: block;
}
/* For all links */
#nav a {
text-decoration: none;
color: #000;
}
/* Main nav styling */
#nav > ul > li > a {
padding: 1em;
}
#nav a:hover {
color: red;
}
#nav > ul > li {
float: left;
border: 1px solid #999;
}
/* Subnav styling */
#nav > ul ul {
display: none;
position: absolute;
font-size: 1em;
background: #eee;
padding: 0.5em;
border: 1px solid #999;
}
/* Subsubnav styling */
#nav > ul ul ul {
left: 50px;
top: 0;
width: 150px;
position: absolute;
}
#content {
}
You need to add position: relative to the "level 2" li elements:
#nav > ul ul li {
position: relative
}
Here's a version where the babies are all lined up: http://jsfiddle.net/3A78u/2/
If you'd like to use >, it would be #nav > ul > li > ul > li.
The 'top' property is relative to the first non-statically positioned parent. In this is case it's the UL element (which is absolutely positioned). You need to add 'position:relative;' to the list-items to get elements inside to align relatively to it.