Question

这是一个Codepen链接，显示我到目前为止所拥有的内容： http://codepen.io/alih/pen/xijbm

编辑：这是一个新的Codepen链接，嵌套的div替换为列表项＆amp; ULS。我欢迎有关如何在没有无关标记的情况下执行此操作的建议，但我主要担心的是如何将下拉面板对准到达其上方菜单的边框。 http://codepen.io/alih/pen/KzsAc

我正在构建一个包含以下功能的下拉菜单：

多个级别，但只有一个级别的下拉列表。子列表将直接显示在其父元素下方。
菜单的父级别将是可变宽度的列表项目
下拉列表的背景将始终具有相同的宽度
下拉列表将显示为“连接”到父元素，其中“绳索”连接到顶级菜单项的左右边缘。
以下是我遇到的问题：下拉列表中的背景将以这些“绳索”为中心。在Codepen演示中，这意味着绿色＆amp;灰色面板将以“将面板”连接到上面的列表项的边框为中心。

这个菜单需要早在IE7上工作，虽然我可能会公然使用无关的div来实现我的目标，但我可能不会使用JavaScript（通常我会如何解决这个问题：减去父级的宽度）从下拉列表的宽度开始的项目，并将该金额的负余量添加到下拉列表中。

我想知道的是：有什么方法可以使用HTML＆amp;仅CSS？

我的CSS（编辑）：

.other {
  float:left
}

ul#topnav,
ul#topnav li,
ul#topnav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}


#topnavblock {
    background:grey;
    width:100%;
    position:relative;
  z-index:700;
}

#topnav {
  z-index:2;
}

#topnav > li > a {
    border-right: 1px solid #999;
}

#topnav li a:hover {
    color: #444;
    text-shadow: -1px -1px 1px #ffffff;
}

#topnav [class^="current"] {
    background: lightyellow;
}


#topnav li a {
    color: #893200;
    text-decoration: none;
    padding: 8px 25px 5px 25px;
    text-align: center;
    display: block;
    text-shadow: 1px 1px 1px #ffffff;
    font: bold 14px 'Arvo', serif;
}


#topnav [class^="current"] > a {
    color: #FF6600;
}
#topnav [class^="current"] > a:hover {
    color: #FF6600;
}

ul#topnav {
 position: relative;
 z-index: 597;
 float: left;
 left:20px;
 padding: 0;
}


ul#topnav > li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul#topnav > li {
 padding:10px 0 14px 0;
}


ul#topnav li.hover,
ul#topnav li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul#topnav ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul#topnav li .navwrap1 {
  background: yellow;
  margin-top: -23px;
  padding-top: 23px;
  width: 210px;
  position: relative;
  top: 15px;
}

ul#topnav li .navwrap2 {
  background:grey;
  padding-bottom: 33px;
}

ul#topnav > li > ul {
border-right: 3px solid grey;
  margin-top: -11px;
  margin-left: 0;
padding-left: 0;
}

ul#topnav ul .navwrap3 {
border-left:3px solid grey;
padding-top:60px;
}

ul#topnav .navwrap2 li {
 float: none;
 background:lightgreen;
 width:100%;
}

ul#topnav ul ul {
position:relative;
 top: 1px;
 left: 0;
}

ul#topnav ul li a {
  padding: 10px 10px 10px 15px;
}

ul#topnav ul ul li a {
  padding: 10px 5px 10px 20px;
}

ul#topnav ul ul ul li a {
  padding-left:20px;
}

ul#topnav li:hover ul {
 visibility: visible;
}

我的标记（缩写，整个菜单在上面的CodePen链接中可见）：

<div id="topnavblock">
<ul id="topnav">   
<li><a href="#">Here is a menu item</a>
<ul>
  <li class="navwrap4">
    <ul class="navwrap3">
      <li class="navwrap1">
        <ul class="navwrap2">
          <li><a href="#">Menu item 1</a></li>
          <li><a href="#">Another menu item of a different length</a>
            <ul>
              <li><a href="#">Sub-menu 2</a></li>
              <li><a href="#">Sub-menu 2</a>
                <ul>
                  <li>Third level nested menu</li>
                  <li>This also has a child of different length</li>
                </ul>
              </li>
              <li><a href="#">Sub-menu 2</a></li>
            </ul>
          </li>
          <li><a href="#">Sub-menu 3</a></li>
        </ul><!--end navwrap2-->
      </li> <!--end navwrap1-->
    </ul><!--end navwrap3-->
  </li><!--end navwrap4-->
</ul>  
</li>
<li><a href="#">Item</a>
 <ul>
  <li class="navwrap4">
    <ul class="navwrap3">
      <li class="navwrap1">
        <ul class="navwrap2">
          <li><a href="#">Sub-menu 3</a></li>
          <li><a href="#">Sub-menu 3</a>
            <ul>
              <li><a href="#">Sub-menu 4</a></li>
              <li><a href="#">Sub-menu 4</a></li>
              <li><a href="#">Sub-menu 4</a></li>
            </ul>
          </li>
          <li><a href="#">Sub-menu 3</a></li>
        </ul><!--end navwrap2-->
      </li> <!--end navwrap1-->
    </ul><!--end navwrap3-->
  </li><!--end navwrap4-->
</ul>  
</li>
 </ul>

Answer 1

ul#topnav li .navwrap1将margin-top: -23px;更改为margin: -23px auto 0;。这将成为这个元素的中心。

如何“居中”这个可变宽度菜单的子元素？

1 个答案: