CSS子菜单栏

Question

这是我的菜单栏的css代码，它出错并且工作不正常。

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
-moz-box-shadow: 0 0 2px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 10px; /* large padding to get menu item to protrude upwards */
padding-bottom: 10px; /* large padding to get menu item to protrude downwards */
}
ul.semiopaquemenu li {
    position: relative;
}
/*sub menu*/
ul.semiopaquemenu li ul.sub-menu {
    display:none;
    position: absolute;
    LEFT:-22PX;
    top:25px;
    background-color:#99CCFF;
    width:130px;
    padding:10px;

    border-left: 2px solid #4b6c9e; 
    border-right: 2px solid #4b6c9e; 
    border-bottom: 2px solid #4b6c9e;
     border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px; 
    text-decoration:italic;
    text-transform:uppercase;
}
ul.semiopaquemenu li:hover ul.sub-menu {
    display:block;
}
</style>

这是我的菜单栏的Html代码：

   <ul class="semiopaquemenu">
    <li><asp:LinkButton ID="lbFAQ" runat="server" PostBackUrl="~/FAQ.aspx">Department</asp:LinkButton>
     <ul class="sub-menu">
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <br />
                <li>
                    <a href="#">Sub Menu 2</a>
                </li>
                <li>
                    <a href="#">Sub Menu 3</a>
                </li>
                    <br />
                <li>
                    <a href="#">Sub Menu 4</a>
                </li>
            </ul>
    </li>
    </ul>

在这里，我无法在子菜单项中制作盒子，所以请帮助解决这个问题。

JSFiddle Demo

Answer 1

将属性的css类ul.semiopaquemenu li ul.sub-menu更改为border-bottom: 0px solid #4b6c9e;。由于在2px中提及px而将其更改为0px.

，因此出现了这些行

Answer 2

我们不清楚实际需要什么，但我明白你需要一个子菜单项上的方框

试试这个JS fiddle

添加此Css

.sub-menu a{  
    border-bottom: 1px solid #000;
    padding: 10px;
    display: block;

}

删除<li>代码

之间的额外消费税

还从子菜单<ul>

中删除保证金填充

ul.semiopaquemenu li ul.sub-menu {
    padding:0px;
    margin:0px;
    list-style:none;

}