Multilevel dropdown menu won't go to the right - html

Question

I have ran into a slight problem with my dropdown menu. I need and extra level in my dropdown, but i really don't know what to do with the CSS...
The page can be seen here.
The problem can be seen in the menu under "Om os", where "Brochure 2013", "Brochure 2014" should be visible when hovering over "Brochure" and not as it is now!
How to fix this?
Here's my CSS:
.cssmenu {
border: 0px solid #2E181A;
margin: 0px auto 0px auto;
padding: 0px;
font-family: verdana,geneva,arial,helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
color: #2E181A;
width: 798px;
background: #E6D9BD;
text-align: center;
}
.cssmenu ul {
background: #E6D9BD;
height: 37px;
list-style: none;
margin: 0px auto 0px auto;
padding: 0;
text-align: center;
}
.cssmenu li {
padding: 0px 8px 0px 8px;
display: inline-block;
}
.cssmenu li a {
color: #2E181A;
display: block;
font-weight: bold;
line-height: 37px;
padding: 0px 10px;
text-align: center;
text-decoration: none;
}
.cssmenu li a:hover {
color: #8e8e8e;
text-decoration: none;
}
.cssmenu li ul {
background: #E6D9BD;
border-left: 5px solid #2E181A;
border-right: 5px solid #2E181A;
border-bottom: 5px solid #2E181A;
display: none;
height: auto;
opacity: 0.95;
filter: alpha(opacity=95);
/* For IE8 and earlier */
position: absolute;
width: 225px;
z-index: 200;
float: none;
/*top:1em;
/*left:0;*/;
}
.cssmenu li:hover ul {
display: block;
}
.cssmenu li li {
display: block;
float: none;
padding: 0px;
width: 225px;
}
.cssmenu li ul a {
display: block;
font-size: 12px;
font-style: normal;
padding: 0px 25px 0px 25px;
text-align: left;
}
.cssmenu li ul a:hover {
background: #D5BE91;
color: #000000;
opacity: 1;
filter: alpha(opacity=100);
/* For IE8 and earlier */;
}
.cssmenu p {
clear: left;
}
.cssmenu .active > a {
background:;
color: #ffffff;
}
.cssmenu .active > a:hover {
color: #ffffff;
}
And here's my menu:
<ul class="active">
<li><span>Forside</span>
</li>
<li><span>Hingste</span>
<ul>
<li><span>Volstrups Cash</span>
</li>
<li><span>Churchill</span>
</li>
<li><span>Blejsbjergs Cooper</span>
</li>
<li><span>Con Cosmos</span>
</li>
</ul>
</li>
<li><span>Salgsheste</span>
<ul>
<li><span>Volstrups Charline</span>
</li>
<li><span>Volstrups Calina</span>
</li>
<li><span>Volstrups Colline</span>
</li>
</ul>
</li>
<li><span>Betingelser</span>
</li>
<li><span>Om os</span>
<ul>
<li><span>Heste på stationen</span>
</li>
<li><span>Samarbejdspartnere</span>
</li>
<li><span>Om Stutteriet</span>
</li>
<li><span>Brochure</span>
<ul>
<li><span>Brochure for 2014</span>
</li>
<li><span>Brochure for 2013</span>
</li>
</ul>
</li>
</ul>
</li>
Hope you guys can help me out! :)

Answer 1

you need woking with level3 ul.add some margin-top andleft to 100%
just add this porperty to you css file:
.cssmenu li li:hover > ul{
visibility:visible !important
}
.cssmenu li ul ul {
margin-top: -30px;
left: 100%;
width: 100%;
visibility:hidden;
border-left:none;
margin-left:-5px;
}
.cssmenu li ul ul a{
border-left:5px solid #2E181A;
}
.cssmenu li ul ul li:first-child a{
border-left:none !important;
}
also you don't need add the <a> tag into <span>. you can remove that,