I have a CSS dropdown navigation menu with a submenu. My problem is that the submenu closes before I click on it. When I move the cursor halfway to the submenu, it disappears. For example when I move my mouse to click on "Item 3 sub 1.1", it disappears.
The main dropdown menu works fine but the submenu is the problem.
What can I do to make the submenu stay until I click on it?... Thanks for the help
This is my CSS for the menu:
.nav {
padding: 0px;
text-align: center;
border: 0px;
vertical-align: middle;
display: table-row;
width: 100%;
margin: 0px auto;
background-color:#660000;
overflow: hidden;
position:relative;
height: 30;
text-align: center;
margin: 0px auto 0px auto;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
float:left;
display:inline;
}
ul li {
display:block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin:0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left:1px solid #660000;
border-right:1px solid #660000;
}
ul li a:hover {
background: #3300cc;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 100;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
display: block;
}
li li ul a {
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
}
This is the html:
<div class="nav" >
<ul class="drop-nav">
<li><a href="item1.html">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="item2_1.html">Item 2 sub 1</a></li>
<li><a href=" item2_2.html"> Item 2 sub 2</a></li>
<li ><a href=" item2_3.html"> Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#"> Item 3</a>
<ul>
<li><a href="#"> Item 3 sub 1 »</a>
<ul>
<li><a href=" item3_1_1.html"> Item 3 sub 1.1</a></li>
<li><a href=" item3_1_2.html"> Item 3 sub 1.2</a></li>
<li ><a href=" item3_1_3.html"> Item 3 sub 1.3</a></li>
</ul>
</li>
<li><a href="#"> Item 3 sub 2 »</a>
<ul>
<li><a href=" item3_2_1.html"> Item 3 sub 2.1 </a></li>
<li><a href=" item3_2_2.html"> Item 3 sub 2.2 </a></li>
<li><a href=" item3_2_3.html"> Item 3 sub 2.3 </a></li>
</ul>
</li>
<li><a href=" item3_3.html"> Item 3 sub 3 </a></li>
<li><a href=" item3_4.html"> Item 3 sub 4 </a></li>
<li><a href=" item3_5.html"> Item 3 sub 5 </a></li>
</ul>
</li>
</ul>
</div>
Your css selectors are very confusing. Only using ul li and then li ul or li li ul a on the next line is too vague and not really targeting an element. While this approach might work for nesting of one level deep, it seriously get's confusing (for the browser) when you start nesting 2 level deep.
I'd give each UL element a certain, descriptive class, which you can precisely target.
Additonally, make use of the position attribute for your UL and don't forget to think about z-index when menus overlap.
Something like this, not very pretty, but it works the way you propably expect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a>
<ul class="dropdown-level-2">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Item 2</a>
<ul class="dropdown-level-1">
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#">Item 2 sub 1</a></li>
<li><a href="#"> Item 2 sub 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
