I have created a CSS dropdown menu but it is not working in IE. However, in Firefox and Chrome, it works perfectly. I am wondering what is the defect in the code that makes it not work in IE! Please help!.........
ul {
list-style: none;
padding: 0px;
margin: 0px;
float: left;
left: 40%;
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;
margin: 0;
}
li:hover ul {
display: block;
position: absolute;
margin: 0;
}
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;
position: relative;
padding: 0px;
z-index: 100;
border-bottom: 0px;
margin: 0;
right: 0;
left: 0;
}
li li:hover a {
display: block;
}
li li ul a {
display: none;
border-left: 1px solid #660000;
margin-left: 60px;
margin-top: -30px;
margin-bottom: 30px;
}
li:hover li:hover ul li a:hover {
background: #660000;
margin-top: -30px;
margin-bottom: 30px;
margin-left: 60px;
border-left: 1px solid #660000;
}
<div class="nav">
<ul class="drop-nav">
<li>Item 1
</li>
<li>Item 2
Item 2 sub 1
</li>
<li>Item 2 sub 2
</li>
<li>Item 2 sub 3
</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>
<li>Item 4
</li>
<li>Item 5
<ul>
<li>Item 5 sub 1
</li>
<li>Item 5 sub 2
</li>
</ul>
</li>
<li>Item 6
</li>
<li>Item 7
</li>
<li>Item 8
</li>
</ul>
</div>
Add this to your html file.<meta http-equiv="X-UA-Compatible" content="IE=9"/> in your and make sure you use <!DOCTYPE HTML>
For these type of errors, just go to developer tools and see whether you can find any css compilation error. I haven't simulate your scenario.
But I have come across a similar issue like you faced. Some styles worked well in Firefox and chrome, but not it IE and edge.
When I inspected the elements in IE, due to some reasons some style had some syntax error. I can't exactly recall that style. But assume following is the problematic style.
font-size: 16p;
This might get interpreted as "font-size: 16px" or this syntax error might get ignored in Chrome and Firefox, but IE might catch them and may not apply that style.
This could be the reason for these type of issues. My suggestion is check the problematic styles in developer tools and resolve them.
Related
I'd like for the menu sub menu to show 10 pixels underneath the menu, i can achieve that using margin-top on the ul, but then i cant move my mouse down to the sub menu because there is a gap. There are posts very similar to this but i could't extract an answer from them. Like this one
Space between menu and drop down menu
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
margin-top: 18px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 long lel</li>
<li>Sub Menu 3 really bare long mad</li>
<li>Sub Menu 4 dvg</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg</li>
<li>sdfg</li>
<li>sdfgsdfgsdfgsdfg</li>
<li>sdfgsdfgsdfgsdfgsdfg</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</li>
<li>sfdgsdfgsdfgl</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<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>
</ul>
</li>
<li class="point">pages</li>
<li class="point">light version</li>
</ul>
UPDATE:
Now that you gave the reference, the hover menu is not actually distant from the li itself, but it is positioned right below it. On the example site the li has a height bigger than the text within and has position: relative; on it.
The dropdown is absolute positioned right below this bigger <li> element with a top: 100%; that way it is distant from the text that triggers the dropdown.
Check the updated Snippet bellow with an updated solution.
Margins are not 'hoverable', and therefore the hover selector is not triggered. One way to keep it distant whilst 'hoverable' is to use padding instead of margins.
So you could change your .lmao li ul, although I wouldn't advise adding style to tags as a CSS best practice, I usually adopt a CSS naming convention such as BEM, SMACSS, among others.
/* Reset the ul style */
ul {
list-style: none;
padding: 0;
margin: 0;
}
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao {
width: 100%;
text-align: center;
}
.lmao li {
display: inline-block;
background-color: white;
padding: 15px;
position: relative;
padding: 20px;
}
.lmao li a {
text-decoration: none;
color: black;
}
.lmao li a:hover {
text-decoration: none;
color: #f38763;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
top: 100%;
min-width: 200px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2 long lel
</li>
<li>Sub Menu 3 really bare long mad
</li>
<li>Sub Menu 4 dvg
</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li>sdfg
</li>
<li>sdfgsdfgsdfgsdfg
</li>
<li>sdfgsdfgsdfgsdfgsdfg
</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf
</li>
<li>sfdgsdfgsdfgl
</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<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>
</ul>
</li>
<li class="point">pages
</li>
<li class="point">light version
</li>
</ul>
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
<body>
<nav>
<ul>
<li>One
<ul>
<li>A</li>
<li>B
</ul>
</li>
<li>Two
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Three
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
I wrote the CSS code for a vertical dropdown navigation menu with a submenu that branches to the right of the dropdown menu items, such as "Item 3 sub 1.1" and "Item 3 sub 2.1" seen in my html below.
The main dropdown menu works fine but the submenu items flicker (up and down jerky movement) and others disappear when I hover over them with the mouse cursor. For example, Item 2 sub 2 stacks and disappears behind Item 2 sub 1 when I hover over the latter with the cursor.
What can I do to stop this jerky flicker effect ?... Thanks for the help
This is my CSS for the menu
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: #330066;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #330066;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 200;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
position:relative;
display: block;
}
li li ul a {
border-left:1px solid #660000;
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
background: #660000;
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
display: none;
}
.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;
}
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>
<li>Item 4</li>
<li>Item 5
<ul>
<li> Item 5 sub 1 </li>
<li> Item 5 sub 2 </li>
</ul>
</div>
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 am trying to create a vertical navigation in my HTML document, but I cannot seem to get the main menu to line up evenly. Here is my HTML for the vertical navigation:
<div id="navbar">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul></li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Menu 5</li>
</ul>
</div>
And my CSS:
#navbar {
margin-left: -40px;
}
#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}
#navbar ul li:hover ul{
visibility:visible;
}
This is my first post ever, so I apologize if I didn't post in the correct format. This code is also from a much larger HTML/CSS file, so I just copy/pasted the only part I'm having an issue with. If I need to post a screenshot of what I'm talking about I can do that.
Thank you in advance!!
demo - http://jsfiddle.net/uab2hr50/2/
if you are looking to align the sub menu below the main menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#navbar ul {
border: 1px solid red;
display: inline-block;
padding: 6px;
}
#navbar li {
list-style: none;
position: relative;
width: 209px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul {
display: none;
padding: 0;
border: 0;
}
#navbar ul li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
<li>Drop 3
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
</ul>
</li>
<li>Menu 5
</li>
</ul>
</div>
There are a few problems here preventing the display you expect:
First: the fiddle
CSS CHANGES
#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
display: block;
}
#navbar li:after {
content: '';
display: table;
clear: both;
}
#navbar ul a {
display: inline-block;
}
#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
padding: 0;
display: inline-block;
vertical-align: top;
margin-bottom: -9000px;
}
#navbar ul ul li:first-child {
padding-top: 0;
}
We removed quite a bit of your padding and margin rules here, and stopped setting a width on the li that you went ahead and broke out of anyway in the original code.
Then, we told both the a and ul elements to display as inline-block, told them they were to vertically align at the top and removed the padding-top off the first child of your sub-nav.
Then, we way over-compensate for the height of your lists by setting a margin-bottom of -9000px to pull your subsequent list items up to where they belong.
No absolute positioning needed, which would probably require some JavaScript to position everything reliably for you given different conditions.
Hope that helps.
Im trying to do a sub-sub menu in a webpage. I tried following the help in this post: how do I make a sub sub menu with css? but to be honest i didnt understand what code i had to add in each class and when i tried it didnt show anything. Here is the code of the menu:
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
Prueba
Here goes the sub-submenu
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
</ul>
</li>
</ul>
</div>
Also the CSS of the classes are these ones (The sub_menu and l7menu class dont have any style applied):
.mainlist {
border-bottom: 2px solid #EAD704;
background: none;
margin-left: 2px !important;
}
.mainlist:hover {
color: #EAD704 !important;
}
ul.dpdown {
float: right;
position: relative;
z-index: 1000;
}
ul.dpdown li {
font-weight: bold;
float: left;
zoom: 1;
display: inline;
line-height: 20px;
list-style: none outside none;
margin-left: -25px;
}
ul.dpdown a:hover {
color: #EAD704;
}
ul.dpdown a:active {
color: #FFFFFF;
}
ul.dpdown li a {
color: #e8e8e8;
display: block;
padding-bottom: 4px;
text-align: center;
width: 150px;
}
ul.dpdown li:last-child a {
border-right: none;
} /* Doesn't work in IE */
ul.dpdown li.hover, ul.dpdown li:hover {
color: black;
position: relative;
}
ul.dpdown li.hover a {
color: white;
}
/*
LEVEL TWO
*/
ul.dpdown ul {
width: 150px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.dpdown ul li {
font-weight: normal;
background: #333;
color: #000;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dpdown ul li a {
background-color: #101010;
border-right: medium none;
display: inline-block;
margin-top: 2px;
padding: 10px 0;
width: 150px;
font-size: 13px;
color: #999999;
}
ul.dpdown ul li a:hover {
background-color: #222222;
}
/*
LEVEL THREE
*/
ul.dpdown ul ul {
left: 100%;
top: 0;
}
ul.dpdown li:hover > ul {
visibility: visible;
}
As always thank you very very much !
Here's a FIDDLE, I fixed your CSS a little.
Your HTML should look like this
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
<li>Prueba</li>
<li>Here goes the sub-submenu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>