Html 在CSS中将子级菜单放置在其父级旁边

我有一个菜单，工作正常，但我想在它上面放一个新的子级别，如果我直接放，当新选项显示时，它们会隐藏菜单的其他选项

这是一张照片

我希望新选项将其显示在选定的“不向下”旁边。 thx

这里是我的css和Html

#菜单栏{
显示：内联块；
}
html[xmlns]#菜单栏{
显示：块；
}
*html#菜单栏{
身高：1%；
}
#菜单栏{
宽度：1010px；
保证金：3px0px 0px 0px；
填充：0px 5px 5px 5px！重要；
最大高度：42px；
线高：100%；
边界半径：43像素；
-webkit边界半径：43px；
-moz边界半径：43px；
盒影：2px24px#9494；
-网络工具包盒阴影：2px24px#9494；
-莫兹盒阴影：2px24px#9494；
背景：#f7f7f7；
背景：-莫兹线性梯度（顶部，#F7F7F7F70%，#C4C416%，#666666 39%，#666666 56%，#545454 68%，#292929 100%）；
背景：-webkit渐变（左上、左下、颜色停止（0%、#f7f7f7）、颜色停止（16%、#c4c4c4）、颜色停止（39%、#666666）、颜色停止（56%、#666666）、颜色停止（68%、#545454）、颜色停止（100%、#292929））；
背景：-webkit线性梯度（顶部，#F7F7F7F70%，#C4C416%，#666666 39%，#666666 56%，#545454 68%，#292929 100%）；
背景：-o-线性梯度（顶部，#F7F7F7F70%，#C4C416%，#666666 39%，#666666 56%，#545454 68%，#292929 100%）；
背景：-ms线性梯度（顶部，#F7F7F7F70%，#C4C416%，#666666 39%，#666666 56%，#545454 68%，#292929 100%）；
背景：线性梯度（到底部，#f7f7f7 0%，#c4c4 16%，#666666 39%，#666666 56%，#545454 68%，#292929 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=“#f7f7f7”，endColorstr=“#292929”，GradientType=0）；
边框：实心2px#b8b8；
位置：相对位置；
z指数：999；
}
#菜单栏li{/*定义los li*/
保证金：0px 8px 6px 8px；
填充：0px 18px 0px 17px！重要；
浮动：左；
位置：相对位置；
列表样式：无；
}
#菜单栏a{/*定义视线*/
字体大小：粗体；
字体系列：格鲁吉亚；
字体风格：普通；
字体大小：15px；
颜色：#Edebebeb；
文字装饰：无；
显示：块；
填充：15px 10px 10px 10px！重要；
边缘底部：6px；
边界半径：29px；
-webkit边界半径：29px；
-moz边界半径：29px；
文本阴影：2PX2PX3PX000000；
}
#菜单栏li ul li a{
保证金：0；
}
/*#菜单栏。激活a，*/#菜单栏li:hover>a{
背景：#ffffff；
背景：-莫兹径向梯度（中心，椭圆覆盖，#ffffff 0%，#ffffff 18%，#ebe8eb 32%，#d2d0d2 51%，#9a989a 74%，#434243 100%）；
背景：-webkit渐变（径向，中心，0px，中心，100%，颜色停止（0%，ffffff），颜色停止（18%，ffffff），颜色停止（32%，ebe8eb），颜色停止（51%，d2d0d2），颜色停止（74%，9a989a），颜色停止（100%，434243））；
背景：-webkit径向梯度（中心，椭圆覆盖，#ffffff 0%，#ffffff 18%，#ebe8eb 32%，#d2d0d2 51%，#9a989a 74%，#434243 100%）；
背景：-o-径向梯度（中心，椭圆覆盖，#ffffff 0%，#ffffff 18%，#ebe8eb 32%，#d2d0d2 51%，#9a989a 74%，#434243 100%）；
背景：-ms径向梯度（中心，椭圆覆盖，#ffffff 0%，#ffffff 18%，#ebe8eb 32%，#d2d0d2 51%，#9a989a 74%，#434243 100%）；
背景：径向梯度（中心椭圆，#ffffff 0%，#ffffff 18%，#ebe8eb 32%，#d2d0d2 51%，#9a989a 74%，#434243 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=“#ffffff”，endColorstr=“#434243”，GradientType=1）；
颜色：#141414；
-webkit盒阴影：0 1px 1px rgba（0,0,0,2）；
-moz盒阴影：0 1px 1px rgba（0,0,0,2）；
长方体阴影：0 1px 1px rgba（0,0,0,2）；
文本阴影：2×2×3×3636；
}
#菜单栏ul li:hover a，#菜单栏li:hover li a{/*coplores iluminacion*/
背景：无；
边界：无；
颜色：#ebebeb；
-盒影：无；
-webkit盒阴影：无；
-莫兹盒阴影：无；
}
#菜单栏ul a：悬停{/*元素子菜单SELECIONADOS*/
背景：#0399D4！重要；
背景：线性梯度（顶部，#87ECEC，#0186BA）！重要；
背景：-ms线性梯度（顶部，87ECEC，#0186BA）！重要；
背景：-webkit渐变（线性、左上、左下、从（#87ECEC）到（#0186BA））！重要；
背景：-莫兹线性梯度（顶部，#87ECEC，#0186BA）！重要；
颜色：#141414！重要；
边界半径：29px；
-webkit边界半径：0；
-moz边界半径：0；
文本阴影：2px2p3px#FFFFFF；
}
#菜单栏ul{/*定义la caja del子菜单*/
背景：#262626；
背景：-moz线性梯度（顶部，#262626 0%，#5E5E 31%，#525252 45%，#050505 100%）；
背景：-webkit渐变（左上、左下、颜色停止（0%、#262626）、颜色停止（31%、#5E5E）、颜色停止（45%、#525252）、颜色停止（100%、#050505））；
背景：-webkit线性梯度（顶部，#262626 0%，#5E5E 31%，#525252 45%，#050505 100%）；
背景：-o-线性梯度（顶部，#262626 0%，#5E5E 31%，#525252 45%，#050505 100%）；
背景：-ms线性梯度（顶部，#262626 0%，#5E5E 31%，#525252 45%，#050505 100%）；
背景：线性梯度（至底部，#262626 0%，#5E5E 31%，#525252 45%，#050505 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=“#262626”，endColorstr=“#05055”，GradientType=0）；
显示：无；
保证金：0；
填充：0！重要；
宽度：201px；
位置：绝对位置；
顶部：42px；
左：0；
边框：实心2px#b8b8；
边界半径：29px；
-webkit边界半径：29px；
-moz边界半径：29px；
-webkit盒阴影：2px 2px 3px#9494；
-莫兹盒阴影：2PX2PX3PX#9494；
盒形阴影：2个2个3个#9494；
}
#菜单栏li:hover>ul{
显示：块；
}
#菜单栏ulli{
浮动：无；
保证金：0；
填充：0！重要；
}
#菜单栏ul a{/*enlaces子菜单*/
填充：10px 1px 10px 15px！重要；
颜色：#2424；
字体大小：12px；
字体风格：普通；
字体系列：格鲁吉亚；
字体大小：粗体；
文本阴影：2px
#menu-bar ul ul
{
    top: 0;
    left: 100%;
}

#menu-bar li:hover > ul
{
    display: block;
}