0

順序付けされていないリストを使用して、CSSとjQueryでドロップダウンメニューを作成しました。問題はFirefoxでリストアイテムの間隔が等しくないことです。ChromeとIEで動作します。reset.cssを使用してみましたが、動作しませんでした：http: //jsfiddle.net/dyUwm/20/

HTML

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css">
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='wrapper'>
<ul class="menu">
    <li><a href="#">QUEM SOMOS</a>
        <ul>
            <li><a href="/ViaZen/faces/quemSomos/apresentacao.xhtml">Apresentação</a></li>
            <li><a href="/ViaZen/faces/quemSomos/diretoria.xhtml">Diretoria e Conselhos</a></li>
            <li><a href="/ViaZen/faces/quemSomos/nossaHistoria.xhtml">Nossa História</a></li>
            <li><a href="/ViaZen/faces/quemSomos/nossosMestres.xhtml">Nossos Mestres</a></li>
            <li><a href="/ViaZen/faces/quemSomos/nossaSanga.xhtml">Nossa Sanga</a></li>
        </ul>
    </li>
    <li><a href="#">O ZEN BUDISMO</a>
    <ul>
            <li><a href="/ViaZen/faces/oZenBudismo/pratica.xhtml">Prática</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/retiros.xhtml">Sesshins (Retiros)</a></li>
            <li><a href="/ViaZen/faces/oZenBudismo/datas.xhtml">Datas Comemorativas</a></li>
            <li><a href="/ViaZen/faces/oZenBudismo/textos.xhtml">Textos e Sutras</a></li>
            <li><a href="/ViaZen/faces/oZenBudismo/sugestoes.xhtml">Sugestão de Leituras</a></li>
        </ul>
    </li>  
    <li><a href="#">COMO PARTICIPAR</a> 
        <ul>
            <li><a href="/ViaZen/faces/comoParticipar/programacaoRegular.xhtml">Programação Regular</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/retiros.xhtml">Sesshins (Retiros)</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/doacoes.xhtml">Doações</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/tornarseMembro.xhtml">Tornar-se Membro</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/oficinas.xhtml">Oficinas</a></li>
        </ul>
    </li>
    <li><a href="/ViaZen/faces/vilaZen.xhtml">VILA ZEN</a></li>  
    <li><a href="#">GALERIA DE IMAGENS</a></li>  
    <li><a href="#">MAIS</a>
        <ul>
        <li><a href="/ViaZen/faces/mais/links.xhtml">Links</a></li>
        <!--                                <li><h:link outcome="/mais/links" value="Aconteceu"/></li>-->
        <!--                                <li><h:link outcome="/mais/relatos" value="Relatos de Experiências"/></li>-->
        <!--                                <li><h:link outcome="/mais/links" value="Zen Peacemakers"/></li>-->
        </ul>
    </li> 
</ul>

</div>
</html>
</body>

CSS

#wrapper {
    margin:auto;
    width:960px;    
}

#wrapper h1,h2,h3,h4,h5,h6 {
    color:black;

}

#wrapper ul.menu {
    float:left;
    list-style-type:none;
    margin:50px 0 30px 0;
    padding:0;
}

#wrapper ul.menu a {
    color: #666;
    font: bold 12px Lora, serif;
    text-decoration: none;    
}


#wrapper ul.menu li
    {    
        float: left;
        list-style: none;
        padding:0;
        margin-right:20px;
        position: relative;

    }
#wrapper ul.menu li a
    {    display: block;
         text-decoration: none;
        white-space: nowrap
}

#wrapper ul.menu li a:hover
    {    
    color:#163a24;
    }

#wrapper ul.menu li ul
        {    
            margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-radius:10px;
            background: #fff;
            box-shadow: 1px 1px 15px #888888;
        }


#wrapper ul.menu ul li
        {    
        float: none;
        display: inline;
        text-transform:capitalize;
                           }

#wrapper ul.menu ul li a
        {    
        width: auto;
        border-bottom:1px solid #225A37;
                padding:10px;
                }

       #wrapper ul.menu ul li a:hover {
                color:#2E8052;                    
      }                    

#wrapper ul.menu ul li:last-child a                
        {
        border-bottom:none;        
        }

jQuery

$(function(){

                $("ul.menu li").hover(function(){

                    $(this).addClass("hover");
                    $('ul:first',this).css('visibility', 'visible');

                }, function(){

                    $(this).removeClass("hover");
                    $('ul:first',this).css('visibility', 'hidden');

                });

                $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

            })

</ p>

4

1 に答える 1

0

My FF Browser ではめちゃくちゃに見えませんが、通常、このような問題が発生した場合、reset.css と一緒に normalize.css を使用します。クロス ブラウザーの互換性は常に課題ですが、normalize はブラウザーのデフォルトのスタイルシートを上書きしようとします。すべてのブラウザで同様にレンダリングします。

于 2012-12-14T22:31:00.013 に答える