Position sublevel menu beside its parent in CSS - html

Question

I have a menu that is working fine, but I want put a new sublevel on it, and if I put directly, when new options show they hide the othes option of menu.
here a pic http://www.potrusmaximus.uphero.com/dudas/menu.jpg
I want that new options show it next to the selected not down.
thx
Here my css and Html.
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
#menu-bar {
width: 1010px;
margin: 3px 0px 0px 0px;
padding: 0px 5px 5px 5px !important;
max-height: 42px;
line-height: 100%;
border-radius: 43px;
-webkit-border-radius: 43px;
-moz-border-radius: 43px;
box-shadow: 2px 2px 14px #949494;
-webkit-box-shadow: 2px 2px 14px #949494;
-moz-box-shadow: 2px 2px 14px #949494;
background: #f7f7f7;
background: -moz-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #f7f7f7), color-stop(16%, #c4c4c4), color-stop(39%, #666666), color-stop(56%, #666666), color-stop(68%, #545454), color-stop(100%, #292929));
background: -webkit-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: -o-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: -ms-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: linear-gradient(to bottom, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f7f7", endColorstr="#292929", GradientType=0 );
border: solid 2px #B8B8B8;
position:relative;
z-index:999;
}
#menu-bar li { /* define los li*/
margin: 0px 8px 6px 8px;
padding: 0px 18px 0px 17px !important;
float: left;
position: relative;
list-style: none;
}
#menu-bar a { /*define los enlace*/
font-weight: bolder;
font-family: georgia;
font-style: normal;
font-size: 15px;
color: #EDEBEB;
text-decoration: none;
display: block;
padding: 15px 10px 10px 10px !important;
margin-bottom: 6px;
border-radius: 29px;
-webkit-border-radius: 29px;
-moz-border-radius: 29px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
/*#menu-bar .active a, */#menu-bar li:hover > a {
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(18%, #ffffff), color-stop(32%, #ebe8eb), color-stop(51%, #d2d0d2), color-stop(74%, #9a989a), color-stop(100%, #434243));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: radial-gradient(ellipse at center, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#434243", GradientType=1 );
color: #141414;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #363636;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a { /* coplores iluminacion*/
background: none;
border: none;
color: #ebebeb;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover { /*elementos submenu seleccionados*/
background: #0399D4 !important;
background: linear-gradient(top, #87ECEC, #0186BA) !important;
background: -ms-linear-gradient(top, #87ECEC, #0186BA) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#87ECEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #87ECEC, #0186BA) !important;
color: #141414 !important;
border-radius: 29px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul { /*define la caja del submenu*/
background: #262626;
background: -moz-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #262626), color-stop(31%, #5e5e5e), color-stop(45%, #525252), color-stop(100%, #050505));
background: -webkit-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: -o-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: -ms-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: linear-gradient(to bottom, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#262626", endColorstr="#050505", GradientType=0 );
display: none;
margin: 0;
padding: 0 !important;
width: 201px;
position: absolute;
top: 42px;
left: 0;
border: solid 2px #B8B8B8;
border-radius: 29px;
-webkit-border-radius: 29px;
-moz-border-radius: 29px;
-webkit-box-shadow: 2px 2px 3px #949494;
-moz-box-shadow: 2px 2px 3px #949494;
box-shadow: 2px 2px 3px #949494;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0 !important;
}
#menu-bar ul a { /* enlaces submenus*/
padding:10px 1px 10px 15px !important;
color:#242424;
font-size:12px;
font-style:normal;
font-family:georgia;
font-weight: bolder;
text-shadow: 2px 2px 3px #b8b2b8;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 29px;
-webkit-border-top-left-radius: 29px;
-moz-border-radius-topleft: 29px;
border-top-right-radius: 29px;
-webkit-border-top-right-radius: 29px;
-moz-border-radius-topright: 29px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 29px;
-webkit-border-bottom-left-radius: 29px;
-moz-border-radius-bottomleft: 29px;
border-bottom-right-radius: 29px;
-webkit-border-bottom-right-radius: 29px;
-moz-border-radius-bottomright: 29px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
<ul id="menu-bar">
<li class="active">POTRUS MAXIMUS</li>
<li>CODEX & DATASLATES</li>
<li>LISTAS
<ul>
<li>1850 Puntos</li>
<li>1500 Puntos</li>
<li>Por raza</li>
</ul>
</li>
<li>BIBLIOTECA
<ul>
<li>Horus Heresy</li>
<li>Warhammer 40K</li>
<li>Warhammer Fantasy</li>
<li>Fantasia Épica</li>
<li>Ciencia Ficción</li>
<li>Otros</li>
</ul>
</li>
<li>REVISTAS
<ul>
<li>White Dwarf Weekly
<ul>
<li>ISSUES 1-42
<li>ISSUES 43-84
</li></li></ul>
</li>
<li>Otras</li>
</ul>
</li>
<li>TUTORIALES</li>
</ul>

Answer 1

i can fix the sub menu design if you want to, but in the general idea, this it what you'r looking for?
#menu-bar ul ul
{
top: 0;
left: 100%;
}
#menu-bar li:hover > ul
{
display: block;
}
live example: http://jsfiddle.net/r9Lxodvb/2/