html菜单在右侧显示,html – CSS菜单垂直显示,右侧有子菜单

我正在使用这个CSS代码：

.vertical-nav {

height:auto;

list-style:none;

width: 100%; /******* MODIFIED ********/

margin: 20px 0 0 0;

}

.vertical-nav li {

height: 25px;

margin: 0;

padding: 5px 0;

background-color: #666;

border: none;

text-align: center;

display: inline-block;

float: left;

width: 100px; /******* MODIFIED ********/

}

.vertical-nav li:hover {

background-color:#f36f25;

color:#FFFFFF;

}

.vertical-nav li a {

font-family:Calibri, Arial;

font-size:18px;

font-weight:bold;

color:#ffffff;

text-decoration:none;

}

.vertical-nav li.current {

background-color:#F36F25;

}

.vertical-nav li.current a {

color:#FFFFFF;

}

vertical-nav ul li ul {

display:none;

list-style-type:none;

width:125px;

padding:0px;

margin-top:3px;

margin-left:-5px;

}

vertical-nav ul li:hover ul {

display:block;

}

vertical-nav ul li:hover ul li {

background-color:#555555;

width:125px;

height:30px;

display:inline-block;

}

vertical-nav ul li ul li:hover {

background-color:#333333;

}

vertical-nav ul li ul li a {

color:#FFF;

text-decoration:underline;

}

vertical-nav ul li ul li a:hover {

text-decoration:none;

}

.vertical-nav li ul {

display: none;

margin-top: 10px;

padding: 0;

}

.vertical-nav li:hover ul {

display: block;

}

.vertical-nav li:hover .sub-menu

{

display: table;

}

.sub-menu li

{

width: 100%;

min-width: 180px;

white-space: nowrap;

display:table-row;

z-index:1;

position:relative;

}

.sub-menu li a

{

display:inline-block;

padding: 0 10px;

}

对于我的水平菜单,如何使菜单垂直显示,还有子菜单显示在悬停的每个链接的右侧？

请查看Fiddle here