1

我正在为学校做一个网站，而且进展顺利。我唯一遇到的问题是：导航栏在不同尺寸的屏幕上改变大小。缩小时最明显，但在不同屏幕上略微偏离。

这是我的意思的屏幕截图： https ://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing 请注意左侧，即问题，根据规模移动很多。上图只是一个例子。

这是我的 CSS：

ul {
  font-family: 'Open Sans', Times;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  z-index: 150;
  /* min-width: 739px;
  max-width: 739px; */
}
ul li {
  display: block;
  position: relative;
  float: right;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 7px solid #CC4D4D;
  padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
  background: #333333;
  margin-left: 0px;
  white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }

这是我的 HTML：

<ul id="menu">
  <li><a href="showcase.html">Showcase</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="faq.html">FAQ</a></li>
  <li><a href="faculty.html">Faculty</a>
    <ul>
    <li><a href="ro.html">Mrs. Rosarita Olvina</a></li>
    <li><a href="cp.html">Mrs. Christine Pavesich</a></li>
    <li><a href="fv.html">Mr. Francisco Virella</a></li>
    <li><a href="fv.html">Mrs. Susan Williams</a></li>
    </ul>
  </li>
  <li><a href="programs.html">Program Areas</a>
    <ul>
    <li><a href="graphics.html">Graphic Design</a></li>
    <li><a href="photography.html">Photography</a></li>
    <li><a href="video.html">Video Production</a></li>
    <li><a href="animation.html">Animation</a></li>
    <li><a href="art.html">Art</a></li>
    </ul>
  </li>
  <li><a href="about.html">About</a>
    <ul>
    <li><a href="whatwedo.html">What We Do</a></li>
    <li><a href="wherewego.html">Where We Go</a></li>
    </ul>
  </li>
  <li><a href="default.html">Home</a></li>
</ul>

感谢您的任何帮助。

***我尝试了第一个答案，它没有用，但我可能做错了。

4

1 回答 1

2

问题不一定在菜单内。而是需要正确放置整个菜单（或其容器）。

据我从您提供的代码中可以看出，浮动也可能在解决此问题方面发挥作用。整个菜单和嵌套的 UL 都是浮动的。我的建议是避免这些浮动并使用“显示：内联块”来获得水平排列。

在像这样精简菜单条目之后，您可以将整个菜单容器正确定位在周围的 HTML 中。

如果您还没有使用它：Firebug 或 Chromebug 插件对于识别此类错误非常方便。

于 2013-09-11T20:01:19.170 回答