Question

我正在尝试使用CSS创建我的第一个下拉导航菜单，我一直反对下拉菜单，所以我现在还没有尝试过这个。

我可以让我的下拉菜单在Chrome中正常工作，但在Firefox和IE中，有些东西是非常错误的。 http://arcwebsolutions.net/barnes/demo.php

如果您使用IE或Mozilla打开该页面，看起来下拉菜单会被抛出544px到它需要的位置右侧，但在Chrome中它的定位正常。

我感觉这很简单，就像一个位置：相对标签是错位的。我不确定，我很沮丧，试图解决这个问题。

CSS

#nav {margin: 0 auto; width: 100%;background: #111; }
#nav ul {height: 40px; width: 952px; margin: 0 auto; padding: 0; text-align: center;background: url(images/navbg.jpg); vertical-align:middle;}
#nav ul li {position: relative; display: inline; margin: 0; padding: 0; list-style: none;}
#nav ul li a {float: left; width: 136px;font-size: 14px;font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;color: #afafaf; display: block; line-height: 40px; text-shadow:2px 2px 3px #000; -webkit-transition: all .2s ease-out;transition: all .2s ease-out;}
#nav ul li a:hover {background: #0c0c0c;transition: all .2s ease-out;-webkit-transition: all .2s ease-out;}
#nav ul li ul {padding: 0;position: absolute;top: 40px;left: 544px;width: 180px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;display: none;opacity: 0;visibility: hidden;}
#nav ul li ul li {background: #111; height:40px;line-height:40px;display: block; color: #fff;text-shadow: 0 -1px 0 #000;}
#nav ul li ul li:hover { background: #666; }
#nav ul li:hover ul {display: block;opacity: 1;visibility: visible;}

HTML

<div id="nav" class="width">
<ul class="shadow2">
<li>
<a href="#"><span class="title fade">Home</span></a>      
</li>
<li>
<a href="#"><span class="title fade">Services</span></a>
</li>
<li>
<a href="#"><span class="title fade">Projects</span></a>
</li>
<li>
<a href="#"><span class="title fade">Parts</span></a>
</li>
<li>
<a href="#"><span class="title fade">Gallery</span></a>
    <ul>
      <li>Classic Cars</li>
      <li>Metal Work</li>
      <li>Diesels</li>
    </ul>
</li>
<li>
<a href="#"><span class="title fade">Blog</span></a>
</li>
<li>
<a href="#"><span class="title fade">Contact</span></a>
</li>
</ul>
</div>

我做了什么？！任何帮助表示赞赏！

Answer 1

您的下拉菜单是第一级别的孩子。

然而，这些是风格的

#nav ul li {
    position: relative; 
    display: inline;

所以他们没有宽度。将其更改为

#nav ul li {
    position: relative; 
    display: inline-block;

现在他们有宽度，他们正确定位。你的ul不需要计算左边，这无论如何都是一个可维持的方法的噩梦

#nav ul li ul {
    padding: 0;
    position: absolute;
    left: 544px;    // No   !!
    left: 0px;
    ....

我的下拉菜单出了什么问题？

1 个答案: