0

我正在创建大型下拉菜单。这一切都是由 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 {
}
4

1 回答 1

0

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 :target 选择器

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

缺点：不兼容IE8-

4.改用js/jQuery

对某些人来说可能是“最简单”的方式，但也是最“重”的方式。

缺点： 较重，无法在禁用 JS 的浏览器中工作。

于 2013-06-08T21:52:05.077 回答