Question

Hi i am currently building an asp.net Menu

     <asp:Menu ID="NavigationMenu" runat="server"  EnableViewState="False" IncludeStyleBlock="False">
                <Items>
                    <asp:MenuItem NavigateUrl="~/ViewHeaders.aspx" Text="View Submissions"/>
                    <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
                    <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
                    <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
                    <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
                    <asp:MenuItem NavigateUrl="~/" Text="Maintenance" Selectable="False"  >
                        <asp:MenuItem NavigateUrl="~/ForeignBank.aspx" Text="Foreign Bank" />
                        <asp:MenuItem NavigateUrl="~/ProfitsProducts.aspx" Text="Products" />
                        <asp:MenuItem NavigateUrl="~/ProfitsTransactions.aspx" Text="Transactions" />
                        <asp:MenuItem NavigateUrl="~/Units.aspx" Text="Units" />
                        <asp:MenuItem NavigateUrl="~/Currency.aspx" Text="Currency Maintenance" />
                    </asp:MenuItem>
                </Items>
            </asp:Menu>

This is the css linked to it

    div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}
div.menu
{
    padding: 4px 0px 4px 8px;
    left: -170;

}
div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;

}
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #FFF; /*680840*/
    border: 1px #4e667d solid;
    height: 20px;
    width: 170px;
    color: #000; /*FFF*/
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
div.menu ul li a:hover
{
    background-color: #680840;
    color: #FFF;
    text-decoration: none;
}
/*
.selectedMenu
{
    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;
}
*/

.menu a.static.selected 
{
    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;
}

div.menu ul li a:active
{
    background-color: #680840;
    color: #FFF;
    text-decoration: none;

}

How cam alter the css to be able to hover onto the menu and it goes to the left instead of the right.

Thanks

Answer 1

Try:

div.menu ul li {text-align:left;}