0

メガドロップダウンメニューを作成しています。それはすべて HTML と CSS によって行われます。私の問題は、LI の 1 つを選択すると、他の LI を犠牲にして最大化されることです。

どこが問題なのかわからないのですが、解決方法を教えていただけないでしょうか。

HTML

<div id="wrapper">
  <div id="menu2">
    <ul id="menu2_ul"> 
      <li class="list"><a href="#">Domů</a>

        <div class="sub">
          <div class="submenu">
            <ul class="submenu_left_menu">
              <li><a href="#">Domů</a></li>
              <li><a href="#">Pojištění</a></li>
              <li><a href="#">Půjčky</a></li>
              <li><a href="#">Hypotéky</a></li>
              <li><a href="#">Účty a spoření</a></li>
              <li><a href="#">Energie</a></li>
              <li><a href="#">Investice</a></li>
              <li><a href="#">Slevy</a></li>
            </ul>
          </div>

          <div class="submenu_content">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
          </div>

          <div class="submenu_poll">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat risus leo, id placerat massa malesuada in. Vestibulum venenatis diam vel cursus dignissim. Aenean ac leo nunc. Fusce erat mauris, commodo at faucibus non, eleifend id nibh. Aliquam non ligula dignissim, venenatis nisi in, lacinia velit. Maecenas pharetra urna metus, nec dictum mauris suscipit et. Donec posuere massa vitae magna tempus, eu interdum nulla consectetur. Mauris consequat fringilla turpis, eu venenatis felis viverra sed. Fusce a placerat lectus. Sed vel sem sodales, eleifend nunc ac, viverra felis. Donec egestas ante nec enim semper dictum. Aenean mollis sodales lorem, sed pharetra leo sollicitudin id. Cras nulla neque, gravida nec rutrum sed, mattis quis nisl. Duis vulputate tempus diam eget tincidunt. Nunc elementum eu ante iaculis laoreet.</p>
          </div>
        </div>
      </li>
      <li class="list"><a href="#">Pojištění</a>

        <div class="sub">
          <div class="submenu">
            <ul class="submenu_left_menu">
              <li><a href="#">Domů</a></li>
              <li><a href="#">Pojištění</a></li>
              <li><a href="#">Půjčky</a></li>
              <li><a href="#">Hypotéky</a></li>
              <li><a href="#">Účty a spoření</a></li>
              <li><a href="#">Energie</a></li>
              <li><a href="#">Investice</a></li>
              <li><a href="#">Slevy</a></li>
            </ul>
          </div>
          <div class="submenu_content">
          </div>

          <div class="submenu_poll">
          </div>
        </div>
      </li>
    </div>
  </div>

CSS

body {
  background-color: black;
  padding: 0px;
  margin: 0px;        
}

#wrapper {
  margin: 0px;
  padding: 0px;
  height: 40px;         
  background-color: white;
}

#menu2 {
  width: 981px;
  margin: 0 auto;
  padding: 0px;      
}

#menu2 ul {
  list-style: none;
  display: table;
  margin: 0px;
  padding: 0px;
  height: 40px;
}

#menu2 li.list {
  display: table-cell;
  line-height: 40px;
  border-left: 1px solid grey;
  position: relative;
}          

#menu2 div.sub {
  margin:0;
  display:none;

  background-color: white;
}

#menu2 li.list:hover div.sub {
  display: block !important;
  width: 981px !important;
}

/******************************************************************************\
\******************************************************************************/

#menu2 div.sub .submenu {
  float: left;
  width: 220px;                        
}

#menu2 div.sub .submenu_content {
  width: 550px;
  float: left;
}

#menu2 div.sub .submenu_poll {
}
4

1 に答える 1

0

1. div.sub を絶対に設定します

はい、開始位置は同じではありません。解決策は、手動でそれぞれにmargin-leftマイナスの値を与えることです。all と id を指定するか、CSS3 セレクター (例: #menu2:nth-child(1) {margin-left: -...}) を使用できます。

欠点: id と特定の margin-left をすべての div.sub + に手動で指定して簡単にすると、おそらくメニュー タブに同じ幅を与える必要があります。

2. div.sub を固定に設定します

この場合、すべての div はまったく同じ位置から始まります。ただし、幅や高さが別の要素よりも大きくならないように注意してください。これは、ドキュメントが固定された pos 要素に対して引き伸ばされないためです。

欠点:固定 div が画面に追従するため、その後に他の div がある場合は機能しません。他の要素がドキュメントのフローで divs.sub より大きい場合は機能しません。

3. CSS3 :target セレクターを試す

ターゲット セレクターは、アンカーの href 内のリンクを変更できます。例はこちら。ただし、div.sub ごとに ID を指定する必要があります。このセレクターを使用すると、すべての div.sub をメニュー項目ごとにネストするのではなく、コンテンツ セクションに直接配置することもできます。IE8-には対応していません。

短所: IE8 と互換性がありません-

4. 代わりに js/jQuery を使用する

おそらく一部の人にとっては「最も簡単な」方法ですが、最も「重い」方法でもあります。

短所: 重く、JS が無効なブラウザーでは機能しません。

于 2013-06-08T21:52:05.077 に答える