Question

我的菜单栏在firefox中工作得很好，但在Chrome中几乎不可能用鼠标移动子菜单按钮，因为它们会消失。

感谢您的帮助

这是我的css标题部分和导航（不要介意HTML中的链接，它适用于Symfony。）：

＆＃13;

/*--------------Header---------------*/

#header, #header a{color:#C0BAB6; background-color:#FFFFFF;}

#header #hgroup{float:left; padding:25px 40px;}
#header #hgroup h1, #header #hgroup h2{}
#header #hgroup h1{font-size:36px;}
#header #hgroup h2{font-size:13px;}

#header nav {margin:60px 0 20px 0; background-color: #97999B; -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15);width: 660px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; float:right;}
#header nav ul{float: right;}
#header nav ul li{display:inline-block; text-transform:uppercase; margin-right: -7px; position: relative;}
#header nav li.last{margin-right:0;}
#header nav ul a{color:#FFFFFF; background-color:#97999B;padding: 15px 12px; display:inline-block;}

#header nav ul li:hover{color:#FF4C4C; background-color: #E2E5E7;}
#header nav ul li:hover a{color:#FF4C4C; background-color:#E2E5E7;}

#header nav ul li ul li { background: #97999B; display: block; border-top: 1px #FFFFFF solid;}
#header nav ul li:hover ul a{color:#FFFFFF; background-color:#97999B; width: 100%; display:inline-block;}
#header nav ul li:hover ul {display: block; opacity: 1; visibility: visible;}
#header nav ul li ul li:hover a{color:#FF4C4C; background-color:#E2E5E7;}

#header nav ul li ul li:hover {color:#FF4C4C; background: #E2E5E7; }
#header nav ul li ul {padding: 0; position: absolute; margin-top: 0; top: 48px; left: 0; width: 120px; -webkit-box-shadow: none;-moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s;}

＆＃13;

<header id="header" class="clear">
                <div id="hgroup">
                    <h1><a href="/"><img height="100" width="146" src="/static/images/logo_rgb_2000px.png" alt="logo"></a></h1>
                </div>
                <nav>
                    <ul>
                        <li><a href="{{ path('newsindex') }}">Aktuelles</a>
                            <ul>
                                <li><a href="{{ path('newsindex') }}">News</a></li>
                                <li><a href="{{ path('datesindex') }}">Kalender</a></li>
                                <li><a href="{{ path('meal_list') }}">Küchenplan</a></li>
                            </ul>
                        </li>
                        <li><a href="{{ path('cms_admin_index') }}">Admin</a></li>
                        <li><a href="{{ path('user_profile', {'username': app.user.username}) }}">Profil</a></li>
                        <li class="last"><a href="{{ path('logout') }}">Logout</a></li>
                    </ul>
                </nav>
                <div class="clear"></div>
            </header>

＆＃13;

Answer 1

问题是firefox / chrome的渲染不同。菜单和子菜单之间的差距是1 px到chrome的大。所以我将利润率从48降低到47像素，一切正常。

Chrome中无法访问CSS菜单

1 个答案: