How Do I Fix The Drop Down Menu In Asp.Net Masterpage

See more:

CSS

HTML

i have the master page code to make a navigation menu however some weird performance are happening
this is the code

<div id="navigation">
               <ul id="nav">

                   <li>
                       <a href="../Pages/Default.aspx">Home</a></li>

                    <li>
                       <a href="../Pages/CompanyProfile.aspx">Company</a></li>


                    <li><a href="#">Products</a>
                        <ul>
                            <li><a href="../Pages/Products.aspx">Hardware</a></li>
                            <li><a href="../Pages/Software.aspx">Software</a></li>
                            <li><a href ="../Pages/ITProducts.aspx">IT Products</a></li>
                        </ul>


                      </li>

and this is the css

#navigation
{
    height: 25px;
    background: linear-gradient(to top, #c2bcb5, #ffffff);
}

#nav
{
    display :inherit ;
     height :50px;
    list-style: none;
    text-align: center;
    
}

#nav ul {
    
    list-style: none;
    margin :0;
    padding :0;
    width :auto ;
    
    

    
    
}

#nav li 
{
    font-family : Times New Roman;
    font-size :20px;
    position:static;
    float: left;
   
    display:block;
    margin-top: 15px;
    text-transform: uppercase;
    padding: 0px 20px 0px 20px;
    border-left: 1px solid #FFFFFF;
  height: 30px;
}




#nav li ul li
{
    display:list-item;
    background-image: url(../Images/bar_background.png);
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid #E3E3E3;
    display :block;
    padding-left: 10px;
     width: 0px;
    height: 30px;
    

}

i searched the web for drop down tutorials and no luck, its just on the products that i want the drop down ,but cant succeed in doing so any help would be grateful