使用CSS将鼠标悬停在下拉菜单上

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;
}

这是：hover版本，仅适用于笔记本电脑导航：

    .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;}

无关：

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

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