我正在尝试使用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>
我做了什么?!任何帮助表示赞赏!
答案 0 :(得分:0)
您的下拉菜单是第一级别的孩子。
然而,这些是风格的
#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;
....