submenu not opening properly

See more:

ASP.NET

CSS

HTML

MVC

Hi,

Submenu is not getting populated on hover. Searching for a solution. Submenu is getting populated upon a click now.

Below is the code:

cshtml code:

<ul class="nav main">
                    <li class="active"><a href="@Url.Action("Home", "Home")">Home</a></li>
                    @if (UserContext.Current.UserRole == Role.AgencyReviewer || UserContext.Current.UserRole == Role.Provider)
                    {
                        <li><a href="@Url.Action("InternalPCR", "ManagePCR")">PCR</a></li>
                    }
                    else
                    {
                        <li><a href="@Url.Action("ExternalPCR", "ManagePCR")">PCR</a></li>
                    }
                    <li><a href="@Url.Action("PIReports", "Reports")">PI Reports</a></li>
                    @if (UserContext.Current.UserRole == Role.AgencyReviewer || UserContext.Current.UserRole == Role.Provider)
                    {
                        <li><a href="@Url.Action("HostMeeting", "ManagePCR")">Host Meeting</a></li>
                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Manage
                            Site</a>
                            <ul class="dropdown-menu">
                                <li><a href="@Url.Action("SearchFacility", "ManageSite")">Facility</a></li>
                                <li><a href="@Url.Action("SearchAgency", "ManageSite")">Agency</a></li>
                            </ul>
                        </li>
                        <li><a href="@Url.Action("SearchUsers", "ManageUsers")">Manage Users</a></li>
                    }
                    <li><a href="@Url.Action("Help", "ManageResources")">Manage Resource</a></li>
                </ul>

css code

ul.nav
{
    background: #6CB9FF;
}
ul.main li
{
    position: relative;
    top: 0;
    left: 0;
}
ul.main li ul
{
    border-top: 0;
}
ul.main li ul li
{
    float: left;
}
ul.main li a
{
    height: 3em;
    line-height: 3em;
    border: 0;
    color: #fff;
    background: #6CB9FF;
    font-family: Arial;
    font-size: 12px;
}
ul.main li ul li a
{
    width: 14em;
    line-height: 3em;
    height: 3em;
    text-align: left;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    border-top: 1px solid #444;
    background: #A6D5FF;
}
ul.main li a:focus
{
    color: #fff;
    background: #666;
}
.smenu
{
display:none
}
ul.main li ul li a:hover 
{
    display:block;
    color: #fff;
    background: #666;
}
ul.main li:hover a
{
    color: #000;
    border-color: #fff;
    background: #A6D5FF;
    font-family: Arial;
    font-size: 12px;
}
ul.main li:hover ul li a 
{
    color: #000;
}
ul.main li:hover ul li a:hover
{
    color: #fff;
    background: #6CB9FF;
}
ul.main li:hover a:active
{
    background: #A6D5FF;
}
ul.main li:hover ul li a:active 
{
    color: #000;
    background: #6CB9FF;
}

Thanks in advance