0

我整天都在阅读和搜索。我什至阅读了这篇文章并试图解决它，但没有成功。

所以，我想做的是一个带有子菜单的 CSS 菜单，并且子菜单以页面为中心。这是我到目前为止所做的。我想要的是子菜单完全以页面为中心显示。这可能吗？

这是HTML：

<div id="menu_panel">
  <div id="menu_2border">
    <div id="menu_section">
      <div id='menu1'>
        <ul>
          <li class='first sub'><a href='#'><span>Hem</span></a>
            <ul>
              <li><a href='#'><span>Privat</span></a></li>
              <li><a href='#'><span>Om Robust</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Koncept</span></a>
            <ul>
              <li><a href='#'><span>Insikt</span></a></li>
              <li><a href='#'><span>Koncept</span></a></li>
              <li><a href='#'><span>Aktivering</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Uppdrag</span></a>
            <ul>
              <li><a href='#'><span>Företag</span></a></li>
              <li><a href='#'><span>Privat</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Blogg</span></a>
            <ul>
              <li><a href='#'><span>Arkiv</span></a></li>
              <li><a href='#'><span>Kategori</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Om Robust</span></a>
            <ul>
              <li><a href='#'><span>Vad erbjuder vi?</span></a></li>
              <li><a href='#'><span>Vilka är vi?</span></a></li>
            </ul>
          </li>
          <li class='sub'><a href='#'><span>Kontakter</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

和CSS：

#menu_panel {
width:100%;
height: 49px;   
color:#4b4b4b;
display:block;
border-top:#efefef 1px solid;
}

#menu_2border {
width:100%;
border-top:#7a7a7a 1px solid;
}

#menu_section {
width: 960px;
height: 29px;   
margin:auto;
padding: 0 0 0 30px;
color:#4b4b4b;
background-color:#fff;
}

#menu1 ul,
#menu1 li,
#menu1 span,
#menu1 a {
margin: auto;
padding: 0;
position: relative;
}

#menu1 {
height: 29px;
background: #fff;
margin:auto;
}

#menu1:after,
#menu1 ul:after {
content: '';
display: block;
clear: both;
}

#menu1 a {
background: #fff;
color: #4b4b4b;
display: inline-block;
font-size: 15px;
line-height: 29px;
padding: 0px 40px;
text-decoration: none;
}

#menu1 ul {
list-style: none;
/* float: left; */
}

#menu1 > ul > li {
float: left;
}

#menu1 li .mainmenu {
border-right:#d8d8d8 1px dotted;
}

#menu1 > ul > li:hover:after { /* faz as setas debaixo dos items do menu */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 7px solid #fff;
margin-left: -10px;
}

#menu1 > ul > li.sub {
border-right:#d8d8d8 1px dotted;
}

#menu1 > ul > li.first {
border-left:#d8d8d8 1px dotted;
}

#menu1 > ul > li:hover > a {
background: #efefef;
}

#menu1 .sub {
z-index: 1;
}

#menu1 .sub:hover > ul {
display: block;
background-color:#
}

#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin:auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}

#menu1 .sub ul li {
*margin-bottom: -1px;
}

#menu1 .sub ul li a {
background: #fff;
filter: none;
font-size: 13px;
display: block;
line-height: 120%;
padding: 10px 30px;
}

请注意，菜单的每个项目中都有指向箭头，它们应该保持在原来的位置。应该居中的是大的子菜单矩形。

提前谢谢了！

4

2 回答 2

1

您需要将定位应用于下拉菜单，并通过仅对其应用定位absolute使其与您的顶级菜单相关。这种直接关系意味着您可以将下拉菜单设置为and ，将其分别粘贴到顶级菜单的最左侧和最右侧，无论它出现在 HTML 中的哪个位置（即，它将匹配顶层的宽度）。relativeleft: 0right: 0ul

因为您已经设置position:relative了许多项目，并且您的某些代码可能依赖于这些项目，所以我无法轻易更改您的代码以使其工作。但是，我在jsfiddle上整理了这个快速演示来说明我的解释。我希望它有所帮助。

于 2013-03-12T13:34:44.187 回答
1

我没有明确理解你的情况，你需要这样的东西吗？如果是这样，我会清楚地理解它。

#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
 display: none;
 position: absolute;
 width: 803px;
 height: 189px;
 margin-left: -401.5px; /* width divided by 2 */
 left: 50%;
 border-bottom: #dddddd 1px solid;
 border-left: #dddddd 1px solid;
 border-right: #dddddd 1px solid;
 background: #FFF;
}

示例/屏幕结果

于 2013-03-12T13:35:13.133 回答