Question

我正在为学校做一个网站，而且一直很顺利。我坚持的唯一问题是：导航栏在不同大小的屏幕上改变大小。在缩小时最明显，但在不同的屏幕上稍微偏离。

以下是我的意思截图： 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>

感谢您的帮助。

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

Answer 1

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

据我所知，你可以从你给出的代码中看出，浮动也可能在解决这个问题上起作用。整个菜单和嵌套的UL都是浮动的。我的建议是避免使用这些浮点数并使用“display：inline-block”来代替水平排列。

在简化了这样的菜单条目之后，您可以将整个菜单容器正确放置在周围的HTML中。

如果你还没有使用它：Firebug或Chromebug插件对于识别这样的错误非常方便。

CSS Navbar在不同大小的屏幕上更改大小

1 个答案: