I have this dropdown menu code, which works great in all browsers except in Explorer. In Explorer, the dropdown menu doesn't function at all. I tried everything in my power to solve this problem but I am not able to. The main horizontal menu is visible and the links seem to work but the dropdown menu that is supposed to appear on hover doesn't appear at all.
Please help!.....
This is the code:
<!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>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li { // Here is actually what the some magic has to be carried out actually.
right: 100px;
background: black;
}
<!DOCTYPE html>
<html>
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6 // This is the place where the menu has to come out of screen
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Why the last I mean the menu in black background appears inside the screen? How to pull it out? I have used "#navigation ul li:last-child ul li" to make the last drop down as black color. But, don't have any idea of pulling it out from the screen's right hand side. Can't we make use of "#navigation ul li:last-child ul li" to pull out the menu out of the screen?
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li {
position: relative;
right: 21%;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<link rel="stylesheet" href="style.css" />
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
I have this dropdown menu code, which works great now (Thanks to the kind person who helped me in a former post), except in Explorer. The dropdown menu in Explorer doesn't appear at all, except when I change the position in "dropdown-level-1" to "fixed." The problem with "fixed" is that the dropdown menu doesn't move with scroll.
Please help me make this menu visible appear in Explorer?...
This is the code:
<!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>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
<li > Item 2 sub 2</li>
</ul>
</li>
<li> Item 3
<ul>
<li> Item 3 sub 1 »
<ul>
<li> Item 3 sub 1.1</li>
<li> Item 3 sub 1.2</li>
<li > Item 3 sub 1.3</li>
</ul>
</li>
<li> Item 3 sub 2 »
<ul>
<li> Item 3 sub 2.1 </li>
<li> Item 3 sub 2.2 </li>
<li> Item 3 sub 2.3 </li>
</ul>
</li>
<li> Item 3 sub 3 </li>
<li> Item 3 sub 4 </li>
<li> Item 3 sub 5 </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>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I'm making a wordpress theme and I have some problems with the menu codification. My menu has sub-menus but they are displaying in the wrong way, And I don't know what to do to make them look like a Drop-Down menu. Here's the link to my site.
Would you mind giving me a CSS code (only) for a really simple dropdown menu? In my website, the menu with sub-categories is 'TV Shows' and the Subcategories are 'Pretty Little Liars', 'Resurrection', and 'Chasing Life'. I need a CSS to make them drop-down from 'Tv Shows'.
This is my CSS Code for the links
#menu {
height:55px;
background-color: #000;
width:100%;
top:0px;
left:0px;
z-index:101;
text-align:center;
text-transform:uppercase;
position:relative;
}
.menulinks {
float:right;
}
#menucontainer {
margin: 0 auto;
width:900px;
font-family: 'Open Sans', sans-serif;
}
#menucontainer a {
color:#fff;
}
#menucontainer a:hover {
color:#fff;
}
#menucontainer ul {
list-style: none;
padding:7px;
color:#A4A4A4;
}
#menucontainer ul a {
color:#848484;
}
#menucontainer li a {
color:#848484;
}
#menucontainer li {
display: inline;
margin-right:3px;
margin-left:3px;
padding:3px;
color:#848484;
}
Try This. fiddle here
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border: 1px solid;
}
ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
}
ul li:hover {
background: #262222;
color: #fff;
}
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;
}
ul li ul li {
background: #262222;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #a1a1a1;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>Home</li>
<li>Menu1</li>
<li>Menu2
<ul>
<li>Sub Menu</li>
<li>Another Sub Menu</li>
<li>And Anthor Sub Menu</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
The answer is more than just CSS. You have to make sure the HTMl is built to accept both. You have to have a ul tag within a ul tag to cause the secondary drop down.
Here is a codepen link for exactly what your looking for I think:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</nav>
Good luck!
I need your help.
My sub sub menu appears to overlap the sub menu which is fine, but i'd like to push it out to the right just a few more so as to allow the sub menu text not be cut off.
Here is picture of what is happening:
Here is my HTML and CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>List of Frequently Used Templates for Road Safety</title>
<style type="text/css">
#navigation {
width: 150px;
font-size: 0.75em;
}
#navigation ul {
margin: 0px;
padding: 0px;
}
ul.top-level {
background: #666;
}
#navigation li {
list-style: none;
}
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
}
#navigation li:hover {
background: #f90;
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#navigation .sub-level {
background: #999;
}
#navigation .sub-level .sub-level {
background: #09C;
}
li:hover .sub-level .sub-level {
display:none;
}
.sub-level li:hover .sub-level {
display:block;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="top-level">
<li>Home
<ul class="sub-level">
<li>Sub Menu Item 1
</li>
<li>
Sub Menu Item 2
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>
FAQ
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>
Sub Menu Item 3
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
</ul>
</li>
<li>
News
<ul class="sub-level">
<li>Sub Menu Item 1
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Adjust your code to match the below. Working sample: http://codepen.io/BJack/full/Cflem
The width of your < li >'s are 150px, so offset the left property by 150px when positioned absolutely.
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 150px;
top: 0px;
}
.sub-level li:hover .sub-level {
display:block;
position: absolute;
left: 150px;
}
You can try to add this
li:hover .sub-level li:hover .sub-level {
left: 175px;
}