0

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

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

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

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

这个菜单需要追溯到 IE7，虽然我可能会公然使用无关的 div 来实现我的目标，但我可能不会使用 JavaScript（这通常是我解决这个问题的方法：从下拉列表的宽度，并在下拉列表中添加该数量的负边距）。

我想知道的是：有什么方法可以单独使用 HTML 和 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>

4

1 回答 1

0

对于ul#topnav li .navwrap1更改margin-top: -23px;为margin: -23px auto 0;. 这将使该元素居中。

于 2013-07-18T20:41:19.190 回答