Question

我有一个非常讨厌的问题，它现在困扰我一段时间了，我已经尝试了一切来修复它，但我只是失败了。

问题是：我的导航由<div>内的许多<div>元素组成，位于另一个<div>内，依此类推。

以下是导航的代码：

    <div class="nav-laptop"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' ORDER BY Proizvodac Asc;">Laptop</a><br />

  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Acer' ORDER BY Proizvodac ASC;">Acer</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Apple' ORDER BY Proizvodac ASC;">Apple</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Asus' ORDER BY Proizvodac ASC;">Asus</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Dell' ORDER BY Proizvodac ASC;">Dell</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='HP' ORDER BY Proizvodac ASC;">HP</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Lenovo' ORDER BY Proizvodac ASC;">Lenovo</a></div>
  <br />
  <div class="nav-bot"><a href="proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Toshiba' ORDER BY Proizvodac ASC;">Toshiba</a></div>
</div>

我会附上一张图片，让您更好地了解我所拥有的内容：

现在这是导航<div>的CSS：

    .nav-laptop, .nav-pc, .nav-tablet, .nav-periferije, .nav-dijelovi, .nav-audio, .nav-mobitel, .nav-monitor, .nav-televizor, .nav-usluge {
    transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    height: 20px;
    width: 72px;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    -ms-border-radius: 8px 8px 0px 0px;
    -o-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    float: left;
    text-align: center;
    vertical-align: middle;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #F00;
    font-size: 1.05em;
    margin-top: 6px;
    overflow: hidden;
}

以下是：仅适用于笔记本电脑导航的悬停版本：

    .nav-laptop:hover {
    height: 186px;
    width: 72px;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    -ms-border-radius: 8px 8px 0px 0px;
    -o-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    float: left;
    text-align: center;
    vertical-align: middle;
    font-size: 1.05em;
    margin-top: 6px;
}

现在所有的导航工作都很棒，很漂亮，但是问题是，每当我将鼠标悬停在任何类别上时，当分割下降时，它会扭曲下面的所有内容，并造成巨大的混乱，并且一次我移动鼠标，一切恢复正常。我该怎么办呢？这可能是非常低效的方式，我对所有建议持开放态度，并期待向你们学习更多人。

以下是正常内容：

由于悬停在导航上而导致内容失真：

Answer 1

您正在浮动菜单的“下拉列表”部分。如果所有其他内容都是浮动的，那么所有内容都在同一个流程中。因此，他们得到了所有“怪异”，即使这并不奇怪，但恰恰是预期的行为。

相反，您应该对要覆盖其他内容的部分使用绝对定位。绝对定位会从文档流中删除元素，因此不会影响除自身以外的任何其他内容的布局。

因此，例如，制作“下拉列表”部分position: absolute和主菜单项position: relative。这样，“下拉”部分将相对于主菜单项定位。

看看例如http://www.w3schools.com/css/css_positioning.asp或http://learnlayout.com用于基本的CSS布局教程。

悬停菜单的简单示例：

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  width: 100px;
  background: #ddd;
}

ul li {
  position: relative;
}
li ul {
  position: absolute;
  display: none;
}
li:hover ul {
  display: block;
}
li ul li {
  background: #eee  
}

<ul>
  <li>
    <span>First</span>
    <ul>
      <li>First</li>
      <li>Second</li>
    </ul>
  </li>
  <li>
    <span>Second</span>
    <ul>
      <li>First</li>
      <li>Second</li>
    </ul>
  </li>
</ul>
<div class="content">
  <p>Content content content content content content content<br>content content content content content content...</p>
  <p>Content content content content content content content<br>content content content content content content...</p>
</div>

Answer 2

我会使用position:absolute;和z-index。

执行此操作的常用方法是使用<ul>列表。

<ul>
    <li>
        <a href="#">Hover</a>
        <ul>
            <li>asdasd</li>
        </ul>
    </li>
</ul>

的CSS：

ul li:hover ul{display:block;}
/* or ul li a + ul{display:block} */

ul li > a{position:relative;}
ul ul{display:absolute;display:none;}

Offtopic：

proizvodi.php?upit=SELECT Slika, Naziv, Opis, Cijena FROM Proizvodi WHERE Kategorija='Laptop' AND Proizvodac='Toshiba' ORDER BY Proizvodac ASC;

您是否允许脚本通过GET参数执行sql？：o

鼠标悬停在CSS

2 个答案: