The dropdown submenu(kpi) here is disappearing whenever I hover the mouse over it.
I have seen and tried the various solution already mentioned in the forum but none seem to help correct it. Please help, I want to solve this.
thank-you
p, ul, li, div { padding:0; margin:0; }
/*Menu*/
body{
font-family:sans-serif;
}
#menu{
height: 800px !important;
}
#menu{
overflow: auto;
position:relative;
z-index:999;
}
.parent-menu{
background-color: darkgray;
min-width: 100px;
float: left;
}
#menu ul{
list-style-type: none;
}
#menu ul li a {
padding: 30px 30px;
display:block;
color:black;
text-decoration: none;
}
#menu ul li a:hover{
background-color:chocolate;
}
/*SubMenu*/
#menu ul li:hover > ul{
left: 105px;shape-image-threshold:
-webkit-transition: left 100ms ease-in;
-moz-transition: left 100ms ease-in;
-ms-transition: left 100ms ease-in;
transition: left 100ms ease-in;
}
/*bloc confli*/
.nav {
display: none;
}
.container a:hover + nav {
display: block !important;
}
.nav {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
#menu ul li > ul {
position: absolute;
background-color: beige;
top: 0;
left: -250px;
min-width: 200px;
z-index: -1;
height: auto;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color:azure;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PREMIERS PAS AVEC BRACKETS</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="QuickSP.css">
</head>
<body>
<nav id="menu">
<ul class="parent-menu">
<li>Topic1
<ul>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
</ul>
</li>
<li>Topic2
<ul class="container">
<li>SupTopic1
<nav class="nav">
<ul>
<li>
KPI
</li>
<li>
KPI
</li>
<li>
KPI
</li>
<li>
KPI
</li>
</ul>
</nav>
</li>
<li>SupTopic2</li>
<li>SupTopic3</li>
<li>SupTopic4</li>
</ul>
</li>
<li>Topic3
<ul>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
</ul>
</li>
<li>Topic4
<ul>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
</ul>
</li>
</ul>
</nav>
</body>
<html>
Add this to your CSS:
.nav:hover {
display: block;
}
Check it in codepen and it's working fine. I looked for a "hover" problem in CSS and I found that ":hover" for "nav" is missing.
Try to add a different class to submenu .sub3 and some additional css and play around this.
ul.container.sub3 {
z-index: 1000 !important;
}
ul.container:hover ul.container.sub3 {
left: 200px !important;
}
p, ul, li, div { padding:0; margin:0; }
/*Menu*/
body{
font-family:sans-serif;
}
#menu{
height: 800px !important;
}
#menu{
overflow: auto;
position:relative;
z-index:999;
}
.parent-menu{
background-color: darkgray;
min-width: 100px;
float: left;
}
#menu ul{
list-style-type: none;
}
#menu ul li a {
padding: 30px 30px;
display:block;
color:black;
text-decoration: none;
}
#menu ul li a:hover{
background-color:chocolate;
}
/*SubMenu*/
#menu ul li:hover > ul{
left: 105px;shape-image-threshold:
-webkit-transition: left 100ms ease-in;
-moz-transition: left 100ms ease-in;
-ms-transition: left 100ms ease-in;
transition: left 100ms ease-in;
}
/*bloc confli*/
.nav {
display: none;
}
.container a:hover + nav {
display: block !important;
}
.nav {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
#menu ul li > ul {
position: absolute;
background-color: beige;
top: 0;
left: -250px;
min-width: 200px;
z-index: -1;
height: auto;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color:azure;
height: auto;
}
ul.container.sub3 {
z-index: 1000 !important;
}
ul.container:hover ul.container.sub3{
left: 200px !important;
}
<nav id="menu">
<ul class="parent-menu">
<li>Topic1
<ul>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
</ul>
</li>
<li>Topic2
<ul class="container">
<li>SupTopic1
<ul class="container sub3">
<li>
KPI
</li>
<li>
KPI
</li>
<li>
KPI
</li>
<li>
KPI
</li>
</ul>
</li>
<li>SupTopic2</li>
<li>SupTopic3</li>
<li>SupTopic4</li>
</ul>
</li>
<li>Topic3
<ul>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
</ul>
</li>
<li>Topic4
<ul>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
<li>SupTopic</li>
</ul>
</li>
</ul>
</nav>
<html>
Related
I modified this menu and added css opacity hover transition.
It only works on the first ul, but the nested sub ul's will not show.
https://jsfiddle.net/sh73vvgf/
Replacing the fade effect with display: none; will show the sub menus.
https://jsfiddle.net/v8op2tqv/
How can I get fade to work on the sub menus? I need it to be pure html/css.
HTML
This nested menu shows a list of Planets and their Moons.
<div class="nav-main">
<ul>
<li>
Planets
<ul>
<li>
Jupiter
<!-- Moons -->
<ul>
<li>
Europa
</li>
<li>
Ganymede
</li>
<li>
Callisto
</li>
</ul>
</li>
<li>
Saturn
<!-- Moons -->
<ul>
<li>
Mimas
</li>
<li>
Dione
</li>
<li>
Titan
</li>
</ul>
</li>
<li>
Uranus
<!-- Moons -->
<ul>
<li>
Umbriel
</li>
<li>
Ariel
</li>
<li>
Oberon
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.nav-main ul {
cursor: default;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
position: relative;
width: 300px;
padding: 0;
margin: 0;
background: #000;
font-size: 1em;
color: #fff;
list-style: none;
}
.nav-main ul li {
display: block;
position: relative;
float: left;
min-width: 25%;
padding: 0.3em;
min-width: 100px;
}
.nav-main ul li a {
display: block;
padding: 1.2em;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #fff;
}
/* Hover Fade */
.nav-main li ul {
webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out;
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
}
.nav-main li:hover > ul {
display: block;
position: absolute;
opacity: 1;
height: auto;
width: auto;
}
.nav-main li:hover li {
float: none;
}
.nav-main ul ul ul {
left: 100%;
top: 0;
}
.nav-main ul:before,
.nav-main ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.nav-main ul:after {
clear: both;
}
I changed some "overflow" style of your code.
.nav-main ul {
cursor: default;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
position: relative;
width: 300px;
padding: 0;
margin: 0;
background: #000;
font-size: 1em;
color: #fff;
list-style: none;
overflow:hidden;
}
.nav-main ul:hover {
overflow:visible;
}
.nav-main ul li {
display: block;
position: relative;
float: left;
min-width: 25%;
padding: 0.3em;
min-width: 100px;
}
.nav-main ul li a {
display: block;
padding: 1.2em;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #fff;
}
/* Hover Fade */
.nav-main li ul {
webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out;
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
opacity: 0;
height: 0;
width: 0;
//overflow: hidden;
}
.nav-main li:hover > ul {
display: block;
position: absolute;
opacity: 1;
height: auto;
width: auto;
}
.nav-main li:hover li {
float: none;
}
.nav-main ul ul ul {
left: 100%;
top: 0;
}
.nav-main ul:before,
.nav-main ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.nav-main ul:after {
clear: both;
}
<div class="nav-main">
<ul>
<li>
Planets
<ul>
<li>
Jupiter
<!-- Moons -->
<ul>
<li>
Europa
</li>
<li>
Ganymede
</li>
<li>
Callisto
</li>
</ul>
</li>
<li>
Saturn
<!-- Moons -->
<ul>
<li>
Mimas
</li>
<li>
Dione
</li>
<li>
Titan
</li>
</ul>
</li>
<li>
Uranus
<!-- Moons -->
<ul>
<li>
Umbriel
</li>
<li>
Ariel
</li>
<li>
Oberon
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I've been working on a CSS3 menu, it's pretty much finished.. But, there is a little problem, the main li's are not really positioned good. If anyone could help me? I've got my site online and you could maybe inspect element? I think placing my code here would just take to much space etc..
Link: http://weveloped.com/
As you can see, the first li is placed horizontally, but the second one+ are placed vertically. How can I make sure all the li's are placed horizontally? It's probably something with the display's in the CSS code, but I can't seem to find the problem.
HTML CODE:
header {
width: 100%;
height: 85px;
background-color: rgba(24, 24, 24, 1);
position: fixed;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
header ul,
header li {
padding: 0;
margin: 0;
}
header.sticky {
height: 50px;
/*background-color: rgba(24,24,24,0.6);*/
}
header nav {
text-align: right;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
height: 85px;
padding-left: 20px;
padding-right: 20px;
line-height: 85px;
color: #FFF;
text-decoration: none;
font-weight: 600;
}
header nav li:hover > a {
color: #A80000;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
header nav li section.row {
overflow: hidden;
height: 0px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
header nav li section.row ul li {
display: block;
}
header nav li section.row ul li a {
display: block;
height: 25px;
line-height: 25px;
margin: 0px 17px 0px 17px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
color: #555;
font-weight: 400;
border-bottom: 1px dashed #333941;
}
header nav li section.row ul li a:hover {
color: #A80000;
}
header nav li section.row ul li:last-child a {
border: none;
}
header nav li section.row ul li.title a {
color: #222;
font-weight: 600;
padding-top: 12px;
margin-left: 16px;
border: none;
}
header nav li:hover > section.row {
overflow: visible;
max-width: 960px;
height: 200px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
background-color: #F5F5F5;
text-align: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<header>
<nav>
<li>Homepage
</li>
<li>About Us
</li>
<li>Services
<section class="row">
<section class="three columns">
<ul>
<li class="title">Website Design
</li>
<li>Website Structure Design
</li>
<li>Mobile Website Design
</li>
<li>Parallax/Responsive Design
</li>
<li>Bespoke Design
</li>
</ul>
</section>
<section class="three columns">
<ul>
<li class="title">CManagement Systems
</li>
<li>WordPress
</li>
<li>Drupal
</li>
<li>Joomla
</li>
<li>Bespoke CMS
</li>
</ul>
</section>
<section class="three columns">
<ul>
<li class="title">Website Development
</li>
<li>CManagement System
</li>
<li>WebApp Development
</li>
<li>eCommerce Development
</li>
<li>Bespoke Development
</li>
</ul>
</section>
<section class="three columns">
<ul>
<li class="title">Our Work
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
<li>Give a Review
</li>
</ul>
</section>
</section>
</li>
<li>Contact
</li>
</nav>
</header>
Thank you very much.
The problem is with the section element in the Services li: it wants to be as wide as the li's parent, so it pushes everything down. Give that section position: absolute; and you should be golden.
I can't get this to work, but in my dropdown menu I just simply can't find a way to make the dropdown menu (for example on account) have it scale with the text.
I tried many things, but only so far a static width is working but that is not what I want
<div class="menu-wrap">
<div class="menu">
<ul class="menu-inner">
<li class="home">Home</li>
<li class="account">Mijn Account
<ul>
<li>Mijn website</li>
<li>Profiel</li>
<li>Persoonlijke gegevens</li>
<li>Voorkeuren</li>
<li>Email instellingen</li>
<li>Log uit</li>
</ul>
</li>
<li class="pages">Mijn pagina's
<ul>
<li>Mijn pagina's</li>
<li>Maak een nieuwe pagina</li>
<li>Verander pagina volgorde</li>
</ul>
</li>
<li class="messages">Mijn berichten
<ul>
<li>Alle privè berichten</li>
<li>Verzonden berichten</li>
<li>Verwijderde berichten</li>
<li>Ongelezen berichten</li>
</ul>
</li>
<li class="forum">Forum
<ul>
<li>Nieuwste berichten</li>
<li>Overzicht</li>
<li>Mijn berichten</li>
<li>Top posters</li>
<li>Zoek topic</li>
</ul>
</li>
<li class="search">Zoeken
<ul>
<li>Zoeken</li>
<li>Vandaag jarig</li>
<li>Online leden</li>
<li>Alle leden</li>
<li>Zoek topic</li>
</ul>
</li>
<li class="online">Online (x)
</ul>
</div>
</div>
and the css code:
.menu-wrap{
position: relative;
background-color: rgba(0,0,0,0.8);
height: 30px;
width: 100%;
text-align: center;
}
.menu {
position: relative;
width: 860px;
margin: 0px auto;
height: 30px;
line-height: 30px;
}
.menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
.menu ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 5px 22px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.menu ul li:hover {
background-color: rgba(0,0,0,0.4);
}
.menu ul li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.menu ul li ul {
padding: 0;
position: absolute;
top: 28px;
left: 0;
width: auto;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
background-color: rgba(0,0,0,0.4)
}
.menu ul li ul li {
color: #fff;
}
.menu ul li ul li:hover { background-color: rgba(0,0,0,0.4);}
.menu ul li:hover ul {
display:inline-block;
opacity: 1;
visibility: visible;
}
All I want is have the sub menus auto scale in width with the text!
You are going to have to add a white-space property to the .menu ul li ul li rule like so:
.menu ul li ul li {
white-space: nowrap;
}
Some of the sub menu links of the third level are being shown in the second level while some of the second level content are not shown at all. On top of that, I don't know how to get the third level to appear at all. I'm sorry, I'm very new to this.
HTML:
<ul>
<li>Home</li>
<li>Bio</li>
<li>Portfolio
<ul>
<li>Design</li>
<ul>
<li>Illustartor</li>
<li>InDesign</li>
<li>Photoshop</li>
</ul>
<li>Media</li>
<ul>
<li>Photography</li>
<li>Video</li>
</ul>
<li>Traditional</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
</ul>
</ul>
</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
CSS:
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
top: 400px;
index-z: 3;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
width: 141px;
}
ul li:hover {
background: #555;
color: #fff;
-webkit-transition: delay .5s ease-in-out;
-moz-transition: delay .5s ease-in-out;
-o-transition: delay .5s ease-in-out;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
li ul li ul{ /* Third Level & beyond ***********/
display:none;
background:#55aa7f;
}
li ul li:hover ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
li ul li ul li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
li ul li ul li:hover span{
color:#fff;
}
.levelThreeAlign{position:relative;}
You have closed each list item in the submenu before the ul for the sub-submenu.
html should look like this fiddle:
<ul>
<li>Home</li>
<li>Bio</li>
<li>Portfolio
<ul>
<li>Design
<ul>
<li>Illustartor</li>
<li>InDesign</li>
<li>Photoshop</li>
</ul>
</li>
<li>Media
<ul>
<li>Photography</li>
<li>Video</li>
</ul>
</li>
<li>Traditional
<ul>
<li>Paintings</li>
<li>Drawings</li>
</ul>
</li>
</ul>
</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
I have changed some of the css in the fiddle as well utilizing direct descendent selectors. Inheritance is very important here. when you style ul li { that will cascade down to ul li ul li { as you are styling all li that are children of a ul. doesn't matter how many levels deep.
I have a navigation menu that I'm trying to get to work, but the submenus keep switching to another submenu whenever I hover over it. How can I get it so that the right menu stays up when I hover over it?
jsfiddle: http://jsfiddle.net/SHQwm/
.hoverBar {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px 20px;
height: 100px;
}
ul {
margin: 0;
padding: 0;
width: 1152px;
}
.mainmenu > li {
list-style: none;
float:left;
text-align: center;
}
ul.mainmenu > li a {
font-family: 'Open Sans', sans-serif;
padding: 0 10px;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
}
ul li ul {
opacity: 0;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
list-style-type: none;
text-align: left;
float: left;
width: 100%;
position: absolute;
z-index: 60;
left: 0;
padding-top: 30px;
}
ul li:hover ul {
opacity: 1;
}
ul li ul li {
float: left;
text-align: left;
border-top: #4c4c4c 1px solid;
border-bottom: #303030 1px solid;
border-radius: 2px;
margin-bottom: 0;
padding: 10px 0;
white-space: nowrap;
width: auto;
}
ul li ul li:hover {
background-color: #008000;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 100px;
height: 30px;
background : #ebebeb;
opacity: 0.25;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
border-top: solid 1px #00aced;
border-bottom: solid 1px #00aced;
}
.mainmenu > li:hover > a {
opacity: 1;
}
ul li ul li a {
display: block;
padding: 0px;
line-height: 14px;
font-size: 12px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-transform: none !important;
text-align: left;
}
ul li:hover ul li {
display:block;
}
.mainmenu {
height: 100px;
}
#jobBank {
left: 450;
width: 210px;
}
And the HTML:
<nav class="head_nav">
<div class="hoverBar" >
<ul class="mainmenu">
<li class="active">About
<ul style="background-color: red;">
<li>Mission</li>
<li>Board Members</li>
<li>Staff</li>
<li>Members</li>
<li>Task Forces</li>
</ul>
</li>
<li>Events
<ul style="background-color: green;">
<li>Description</li>
<li>Registration with Outlook ICS</li>
<li>Online Payment</li>
<li>Email auto-reminders</li>
<li>Multiple registrants allowed</li>
</ul>
</li>
<li>Galleries
<ul style="background-color: blue;">
<li>EXAMPLE: Executive Board</li>
<li>EXAMPLE: Single Page or Blog Page</li>
<li>EXAMPLE: Photo Gallery</li>
</ul>
</li>
<li>Educational Resources</li>
<li>Economic Development
<ul style="background-color: yellow;">
<li>Major Corporations/Global Businesses</li>
<li>Maps</li>
<li>Available Properties</li>
<li>Communities Represented</li>
<li>Demographics</li>
<li>Workforce</li>
<li>Taxes</li>
<li>Transportation</li>
<li>Utilities</li>
<li>Incentives & Financing</li>
<li>Report and Publications</li>
</ul>
</li>
</li>
<li>Media Room
<ul>
<li class="first">Press Releases</li>
<li>Media Kit Information</li>
<li>Blog</li>
<li>Link to Logo & Standards</li>
<li>Link to Photo Gallery</li>
<li>Twitter, Facebook, LinkedIn, Flickr</li>
<li>Speakers Bureau List/info</li>
<li>Fact Sheet</li>
<li class="last">Media Relations Contact</li>
</ul>
</li>
<li>Job Bank
<ul id="jobBank">
<li class="first">Member Add/Edit/Delete</li>
<li class="last">Time Expire</li>
</ul>
</li>
</ul>
<div class="floatr"></div>
</div>
</nav>
Remove opacity: 0 from ul li ul. Replace it with display: none;. Remove opacity: 1 from ul li:hover ul. Replace it with display: block;. Currently, all of the subnavigations are there, you just can't see them. Setting them to display: none; by default will only display the correct one when the parent navigation element is hovered and will remove the issue you're having. http://jsfiddle.net/SHQwm/5/