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を適用してトップレベル メニューに関連付ける必要があります。その直接的な関係は、ドロップダウン メニューをとに設定できることを意味し、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 に答える