Html 子菜单垂直对齐

我有一个用HTML和CSS制作的水平菜单（即使项目是在.NET framework asp和c#）应该显示垂直的 将鼠标悬停在上方时的子菜单项。 但子菜单项不会出现这种情况 水平对齐并翻转布局的其余部分，以及 影响不想要的设计

这是我目前的代码：

HTML:

这就是它显示的内容：

jsfiddle在这里

试试这个css

#menu{
    border:1px solid red;
    height:30px;

}
#menu ul {
list-style:none;
   margin:0;
   padding:0;
   position:relative;

   text-align:center;


}
#menu ul li {
    display:block;
   float:left;
   list-style:none;
   margin:0 2px 0 0;
   padding:0;
   position:relative;

}
#menu li ul {
    position:absolute;
    display:none;
    border:1px solid green;

}
#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu ul li a:hover {
   background:#369;
   color:#fff;
}

#menu ul li a.active,
#menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

#menu ul li:hover ul {
    display: block;
 }
#menu ul li ul li {
    margin:0 1px 0 0;
     display:block;
    float:none;
}
#menu ul li ul li a{
    display:block;

}

---

提供一个与codeshey@shibin的小提琴链接，谢谢，但是它迫使设计改变，因为它必须在#menu{}处有一个很大的高度才能显示所有子菜单。如果没有高度，子菜单根本不会显示。还有其他帮助吗？你可以删除#菜单高度，请用JSFIDDLETHERK@Shibin展示你的设计，成功了。我只需要将基础分区的position属性更改为'position:inherit；'阻止分区被替换或隐藏子菜单项。

#menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;


}
#menu ul li {
    display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;    
}
#menu li ul {
    position:relative;

}
#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu ul li a:hover {
   background:#369;
   color:#fff;
}

#menu ul li a.active,
#menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

li:hover ul {
    display: block;
    position: absolute;

}

#menu{
    border:1px solid red;
    height:30px;

}
#menu ul {
list-style:none;
   margin:0;
   padding:0;
   position:relative;

   text-align:center;


}
#menu ul li {
    display:block;
   float:left;
   list-style:none;
   margin:0 2px 0 0;
   padding:0;
   position:relative;

}
#menu li ul {
    position:absolute;
    display:none;
    border:1px solid green;

}
#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu ul li a:hover {
   background:#369;
   color:#fff;
}

#menu ul li a.active,
#menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

#menu ul li:hover ul {
    display: block;
 }
#menu ul li ul li {
    margin:0 1px 0 0;
     display:block;
    float:none;
}
#menu ul li ul li a{
    display:block;

}