CSS Submenu bar

Question

This is my css code of menu bar which is having an error and not working fine.

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>

This my Html code of menu Bar:

   <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>

In this I'm not able to make boxes in sub menu items, so please help with this.

JSFiddle Demo

Answer 1

We are not clear what is actually required but what I understood is you need a box on sub menu item as well

try this JS fiddle

Add this Css

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

}

Remove Extra Br in between <li> tags

Also Remove Margin padding form submenu <ul>

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

}

Answer 2

change css class ul.semiopaquemenu li ul.sub-menu of attributes to border-bottom: 0px solid #4b6c9e;. The lines are appeared due to mention of px in 2px change it to 0px.