Question

我正在创建超级下拉菜单。这一切都是由HTML和CSS完成的。我的问题是当你选择一个LI时，它会以其他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 {
}

Answer 1

<强> 1。将div.sub设置为绝对

是的，他们没有相同的起始位置：因此解决方案是手动为每个人提供margin-left减去值。你可以给它们全部和id，或者使用CSS3选择器（例如#menu2:nth-child(1) {margin-left: -...}）。

缺点：为每个div.sub +手动指定一个id和一个特定的margin-left，以便更容易为菜单标签提供相同的宽度。

<强> 2。将div.sub设置为固定

在这种情况下，每个div都将从完全相同的位置开始;但请注意，它的宽度或高度并不优于其他元素，因为文档不会对固定的pos元素进行拉伸。

缺点：如果您之后有其他div，则无效，因为固定div将跟随屏幕。如果没有其他元素大于文档流中的divs.sub，则无效。

第3。试用CSS3：目标选择器

目标选择器可以修改锚点的href中的链接。 An Example here.但是，您必须为每个div.sub指定id。此选择器还允许您将所有div.sub直接放在内容部分中，而不是为每个菜单项嵌套它们。与IE8不兼容 - 。

缺点：与IE8不兼容 -

<强> 4。请改用js / jQuery

对某些人而言，可能是“最简单”的方式，也可能是最“沉重”的方式。

缺点：更重要，无法在禁用JS的浏览器中使用。

CSS mega下拉菜单

1 个答案: