html - CSS导航栏在不同大小的屏幕上更改大小

我正在为学校做一个网站，目前进展顺利。我唯一遇到的问题是：导航栏会在不同尺寸的屏幕上更改尺寸。缩小时最容易看到，但在不同的屏幕上略微关闭。

这是我的意思的屏幕截图：
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>

感谢您的任何帮助。

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

最佳答案

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

据我从您提供的代码中可以看出，浮点数也可能在解决此问题中起作用。整个菜单和嵌套的UL都是浮动的。我的建议是避免出现这些浮动，而是使用“ display：inline-block”代替以获得水平排列。

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

如果您还没有使用它：Firebug或Chromebug插件确实很容易识别此类错误。

关于html - CSS导航栏在不同大小的屏幕上更改大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18749910/