1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

menu drop html css [problem]

Discussão em 'Web Development' iniciada por alfinete, 28 de Julho de 2008. (Respostas: 6; Visualizações: 1206)

  1. alfinete

    alfinete Power Member

    code css

    Código:
    #menuh-container
        {
        position: absolute;        
        top: 1em;
        left: 1em;
        
        }
    
    #menuh
        {
        font-size: small;
        font-family: arial, helvetica, sans-serif;
        width:100%;
        
        float:left;
        margin:2em;
        margin-top: 1em;
        }
            
    #menuh a
        {
        text-align: center;
        display:block;
        border: 1px solid #555;
        white-space:nowrap;
        margin:0;
        padding: 0.3em;
        }
        
    #menuh a, #menuh a:visited    /* menu at rest */
        {
        color: white;
        background-color: #2E8B57;
        text-decoration:none;
        }
        
    #menuh a:hover    /* menu at mouse-over  */
        {
        color: white;
        background-color: #3CB371;
        }    
                
    #menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
        {
        background-image: url(/Images/navdown_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }
        
    #menuh a.parent, #menuh a.parent:hover     /* attaches side-arrow to all parents */
        {
        background-image: url(/Images/nav_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }
    
    #menuh ul
        {
        list-style:none;
        margin:0;
        margin-bottom:1px; 
        padding:0;
        float:left;
        width:9em;    /* width of all menu boxes */
         width:95px;
        }
    
    #menuh li
        {
        position:relative;
        
        min-height: -1px;     /* Sophie Dennis contribution for IE7 */
        vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
        font-size:10px;
        width:95px;
        }
    
    #menuh ul ul
        {
        position:absolute;
        z-index:500;
        top:auto;
        display:none;
        padding: 1em;
        margin:-1em 0 0 -1em;
        }
    
    #menuh ul ul ul
        {
        top:0;
        left:100%;
        }
    
    div#menuh li:hover
        {
        cursor:pointer;
        z-index:100;
        }
    
    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    {display:none;}
    
    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    {display:block;}
    
    /* End CSS Drop Down Menu */
    
    
    
    
    .menuprincipal
    {
    position:relative ;
    top:0px;
    background-color :red;
    left:40px;
    
    }
    .sec
    {
    position:relative;
    top:100px;
    left:200px;
    width:750px;
    height:700px;
    z-index:1 ;
    
    
    }
    
    

    code html

    Código:
    
      
    <html>
      
      <head>
      <link rel="stylesheet" type="text/css" href="menu.css">
      </head>
      
      
    <body> 
      <div>
            <div class="menuprincipal" style="z-index: 2">
                <div id="menuh-container">
                    <div id="menuh">
                        <ul>
                            <li><a href="teste.aspx" target="mostra2" class="top_parent">Home</a></li>
                        </ul>
                        <ul>
                            <li><a href="#" class="top_parent">Bandas</a>
                                <ul>
                                    <li><a href="#">---------</a></li>
                                    <li><a href="#" class="parent">Dicografias</a>
                                        <ul>
                                            <li><a href="#">Sub 1:2:1</a></li>
                                            <li><a href="#">Sub 1:2:2</a></li>
                                            <li><a href="#">Sub 1:2:3</a></li>
                                            <li><a href="#">Sub 1:2:4</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#" class="parent">Bibliografia</a>
                                        <ul>
                                            <li><a href="#">Sub 1:4:1</a></li>
                                            <li><a href="#">Sub 1:4:2</a></li>
                                            <li><a href="#">Sub 1:4:3</a></li>
                                            <li><a href="#">Sub 1:4:4</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#" class="parent">Eventos</a>
                                        <ul>
                                            <li><a href="#">Sub 1:5:1</a></li>
                                            <li><a href="#">Sub 1:5:2</a></li>
                                            <li><a href="#">Sub 1:5:3</a></li>
                                            <li><a href="#">Sub 1:5:</a></li>
                                            <li><a href="#">Sub 1:5:5</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- end the menuh-container div -->
                </div>
                <!-- end the menuh div -->
            </div>
            <div class="sec">
                <iframe scrolling="no" frameborder="0" name="mostra2" style="position: relative;
                    left: 0px; top: 0px; border: 2px black; width: 750px; height: 700px;"></iframe>
            </div>
        </div>
    </body>
    </html>
    
    
    tenho isto em 2 files um css e outro html, e as opções proncipais não mostram seus submenus.

    e no studio tenho este mesmo code (mas com master page) e funciona.

    gostava de seber pq é que em 2 files separados apenas html e css nãoi funca.
     
  2. Scarecrow

    Scarecrow Power Member

    O <link> precisa de ser fechado, ou com </link> ou acabando a linha com />

    Tipo:
    <link rel="stylesheet" type="text/css" href="menu.css"> </link>
     
  3. alfinete

    alfinete Power Member

    sim ja fiz funciona em tdos os browsers menos no ie nam sei pq
     
  4. Scarecrow

    Scarecrow Power Member

    Funciona nos outros mas não funciona no IE??(6 ou 7??)

    Eu lembro-me que algumas propriedades CSS não eram suportadas no IE 6.
     
  5. alfinete

    alfinete Power Member

    no 7 tb nam dá
     
  6. MPalhas

    MPalhas Power Member

    a propriedade CSS hover, no IE só funciona para as hiperligações (<a href="..."></a>)

    em vez de pores o hover nos elementos das listas, tenta por nas hiperligações que lá estão dentro
     
  7. alfinete

    alfinete Power Member

    thanks pelo help, mas não estou a perceber a modificação, dá ai o code onde tenho de mecher quer no css e no html

    thanks
     

Partilhar esta Página