css - 使用 CSS 和指针居中子菜单

Question

我整天都在阅读和搜索。我什至读过this article并试图解决这个问题，但没有成功。

所以，我想要做的是一个带有子菜单的 CSS 菜单，并且子菜单位于页面的中央。 This is what I have done so far .我想要的是子菜单完全居中显示在页面上。这可能吗？

这是 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;
}

请注意，菜单的每个元素中都有指向箭头，它们应该保持在原处。应该居中的是大的子菜单矩形。

非常感谢!

Answer 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;
}

Example/Screen Result