0

在学习了几个教程之后，我设法建立了一个纯 CSS 的垂直下拉菜单。但是，宽度和绝对偏移量是硬编码的，我无法让它们根据它们的内容自动调整。我希望避免对这些进行硬编码，因为我希望将其集成到我不知道菜单项实际长度的 CMS 中。

我在这里创建了一个 JSFiddle，显示菜单工作：http: //jsfiddle.net/nhfHw/2/

顶级项目目前被硬编码为 100px 的宽度（我希望根据该级别最长的项目进行调整。）当我试图删除它时，它只是在整个屏幕上扩展了下一个子级别。

#navigation 
{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #707070;
  line-height: 20px;
  width: 100px;  /* I wish to remove this */
  margin-top: 30px;
}

子级别的 x 偏移量也是硬编码的。我希望他们只根据父母的宽度进行调整。它们的宽度也被硬编码为 200px。

li:hover .sub-level 
{
  background: #D0D0D0;
  display: block;
  position: absolute;
  left: 100px; /* I wish to remove this */
  top: 0px;
}

li:hover .sub-level .sub-level 
{
  left: 210px; /* I wish to remove this */
  top: 0px;
}

ul.sub-level li 
{
  border: none;
  float:left;
  width: 200px; /* I wish to remove this */
}

如果可能的话，我希望避免使用 Javascript。

4

2 回答 2

1

display: inline-block和我相信的组合white-space: nowrap可以满足您的需求：http: //jsfiddle.net/nhfHw/14/

#nav {
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #707070;
    line-height: 20px;
    margin-top: 30px;
}
#nav ul li {
    padding: 1px 5px;
    list-style: none;
    white-space: nowrap;
    display: block;
    position: relative;
}
#nav ul li:hover {
    background: #E0E0E0;
}
#nav ul li a {
    text-decoration: none;
    color: #707070;
    display: block;
}
#nav ul ul {
    display: none;
    border-left: 1px solid #ccc;
    position: absolute;
    left: 100%;
    top: 0px;
}
#nav ul li:hover > ul {
    display: block;
}
于 2013-08-26T18:35:32.030 回答
1

这正是我上面的答案所做的，但没有错误......

http://jsfiddle.net/techsin/UBgZf/2/ 更新

*{padding:0;margin:0;}
.main{position:relative;}
ul ul{
    display:none;
    position:absolute;
    left:100%;
    margin-top:-30px;
}
.main>li>ul{
    background-color:#BDBDBD;
}
ul {
    white-space: nowrap;
    color:white;
    background-color:gray;
    float:left;
}
li{
    height:20px;
    list-style-type:none;
    padding:10px;
    clear:both;
}
li:hover>ul{
    background-color:black;
    display:block;
}

技巧包括：

  • 空白无环绕
  • 漂浮
  • 绝对定位，因此它始终引用已定位为绝对或相对的第一个元素。
于 2013-08-26T21:34:01.790 回答