Question

我正在使用带有下拉菜单的CSS导航栏。我在我的网站上进行扩展时遇到了问题，但是有些有用的用户帮助我解决了这个问题。他们给我的解决方案是将position属性更改为绝对属性。这适用于文本框和图像，但将导航栏代码更改为绝对会破坏它并使某些按钮转到第二行。有没有办法阻止这种情况发生，并在页面调整大小时停止导航栏的排除？对不起，如果这很难理解。这是我的导航栏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; }

Answer 1

您可以尝试设置min-width:(amount of pixels)px。这会设置元素的最小宽度，但除非您设置max-width，否则它可以升级。

使用position：relative停止缩放CSS导航栏

1 个答案: