Html css子菜单链接显示在菜单下方的文本下

我有一个带有子菜单链接的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;
}
.sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

和一个jsFiddle：

---

如何使子菜单链接显示在下面的任何文本上…

使用绝对定位后，为文本提供高于其后面元素的z索引。

我已更新了小提琴

---

添加

位置：相对；z指数：1to.sub菜单li
这些选择器有些古怪<代码>垂直导航ul li a

没有任何目标。具有

垂直导航

和多个

ul

且同时具有

。垂直导航li:hover ul

和

。垂直导航li:hover。子菜单

是另一种可能的糟糕设计选择，因为它们针对相同的元素，后者更具体。