Menu em CSS

Question

Olá pessoal,

Estou implementando um menu em CSS a partir de uma consulta como segue o modelo abaixo:

Estilo CSS:

.menu /* Removendo bullets e colocando borda */
{
    list-style:none;
    border:0px none;
    float:left;
}

.menu li /* ESTILIZANDO ITENS DO MENU */
{
    list-style:none;
    ;
    float:left;
    border-right: 0px none; /*1px solid #c0c0c0;*/
}

.menu li a /* ESTILIZANDO LINKS 1 */
{
    color:#fff;
    text-decoration:none;
    padding:5px 10px;
    display:block;
}
 
.menu li a:hover /* ESTILIZANDO LINKS 2 */
{
    background:#333;
    color:#fff;
    -moz-box-shadow:0 3px 10px 0 #CCC;
    -webkit-box-shadow:0 3px 10px 0 #ccc;
    text-shadow:0px 0px 5px #8B8B8B; /*#fff;*/
}

.menu li  ul /* ESCONDENDO SUBMENU */
{
    ;
    top:25px;
    left:0;
    background-color:#8B8B8B;
    display:none;
    color:#fff;
}  

.menu li:hover ul, .menu li.over ul /* EXIBINDO SUBMENU */
{
    display:block;
}

Código ASPx.VB:

Private Sub GerarMenuCSS()
        Dim Ds1, Ds2 As Data.DataSet
        Dim pLista1, pLista2 As New WebControls.ListBox

        Ds1 = Formulario.ConsultaCategoria(" Formulario_Categoria IN (SELECT Y.Formulario_Categoria " & _
                                          " FROM b005_permissoes X " & _
                                          " INNER JOIN a001_formularios Y ON (Y.Formulario_Codigo = X.Formulario_Codigo) " & _
                                          " WHERE X.Pessoa_Codigo = " & Session("sUsuario") & ") ", "")

        pLista1.DataTextField = "CATEGORIA"
        pLista1.DataValueField = "Formulario_Categoria"
        pLista1.DataSource = Ds1
        pLista1.DataBind()

        pLista2.Items.Clear()
        pLista2.Items.Add(" <ul class='menu'> ")
        pLista2.Items.Add("   <li><a href='Index.aspx'>HOME</a></li> ")

        For Each item As ListItem In pLista1.Items
            Ds2 = Permissao.Consultar(" A.Pessoa_Codigo = " & Session("sUsuario") & " AND C.Formulario_Categoria = " & item.Value, "")
            pLista2.Items.Add("      <li><a href='#'>" & item.Text & "</a> ")
            pLista2.Items.Add("      <ul> ")

            For C As Integer = 0 To Ds2.Tables(0).Rows.Count - 1
                pLista2.Items.Add("       <li><a style='color:#fff; width:150px;' href='" & Ds2.Tables(0).Rows(C)("Formulario_Arquivo") & "' target='" & Ds2.Tables(0).Rows(0)("Formulario_Target") & "'>" & UCase(Ds2.Tables(0).Rows(C)("Formulario_Menu")) & "</a></li> ")
            Next

            pLista2.Items.Add("      </ul><li> ")

        Next

        pLista2.Items.Add("   <li><a href='../Index.aspx'>SAIR</a></li> ")
        pLista2.Items.Add(" </ul>")

        For Each item As ListItem In pLista2.Items
            Label1.Text = Label1.Text & item.Text
        Next

    End Sub

A questão é que gostaria que, ao passar o mouse sobre os itens do menu os submenus ficassem alinhados à esquerda, como nesta figura.

Alguém poderia ajudar?

Grato,

Ilano.

Answer 1

Já tentou mexer no "MARGIN" no elemento ".menu li a" no CSS?