none
Menu em CSS RRS feed

  • Pergunta

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

    sexta-feira, 5 de dezembro de 2014 23:55

Todas as Respostas