0

我正在使用具有下拉菜单的 CSS 导航栏。我在我的网站上进行缩放时遇到了问题，但这里有一些有用的用户帮助我解决了这个问题。他们给我的解决方案是将位置属性更改为绝对。这适用于文本框和图像，但将导航栏代码更改为绝对会破坏它并使一些按钮转到第二行。有没有办法阻止这种情况发生，并在调整页面大小时阻止导航栏出现问题？对不起，如果这很难理解。这是我的导航栏 CSS，HTML 只是一个列表：

jsfiddle：http: //jsfiddle.net/qN8sm/embedded/result/ 

ul {
  font-family: 'Open Sans', Times;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 150;
}
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 30px 30px 30px;
  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; }
4

1 回答 1

1

你可以尝试的是 set min-width:(amount of pixels)px。这设置了元素的最小宽度，但如果除非你设置 a max-width，它可以放大。

于 2013-08-15T19:33:57.263 回答