在悬停时将向下滑动添加到导航栏

Question

我希望 class=dropdown 的内容在悬停在 class=header__nav-item--drobdownButton 上时缓慢向下滑动（PRODUKT），但我不确定如何将其添加到我在 CSS 中的代码中。我尝试添加 transition:max-height .8s ease-in; 但 id 不起作用，我很确定我可以在 CSs 中完成它而无需过多更改我的代码，或者我可以用 jquery 解决这个问题。 . 如果有人能给我指出正确的方向，那就太好了。

function highlightButtonOnDropdownActive() {
 var activeClass = 'header__nav-item--active';
 var dropdownButtonSelector = '.header__nav-item--dropdownButton'

 $(dropdownButtonSelector).on('mouseenter', function(){
  $(this).addClass(activeClass);
 });

 $('.header__nav-item:not(' + dropdownButtonSelector + ')').on('mouseenter', function(){
  $(dropdownButtonSelector).removeClass(activeClass);
 });

 $('.dropdown').on('mouseleave', function() {
  $(dropdownButtonSelector).removeClass(activeClass);
 });
}


$().ready(function(){
 highlightButtonOnDropdownActive();
});

html, body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.flex-container {
  margin: 0 auto;
  max-width: 1024px;
  min-width: 320px;
  padding: 0 10px;
}

.header {
  background-color: #333;
}

.header__nav {
  height: 60px;
  letter-spacing: 2.6px;
  line-height: 60px;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.header__nav-item {
  display: block;
  float: left;
}

.header__nav-item a {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 400;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s linear;
}

.header__nav-item--active a {
  background-color: #ffffff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item a:hover {
  background-color: #ffffff;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item--dropdownButton {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-decoration: none;
  text-transform: uppercase;
}

.header__nav-item--contact {
  float:right;
}

.header__nav-item--dropdownButton:hover ~ .dropdown {
  display: block;
}

.jumbotron {
  background: url(http://www.mathiasgerlach.com/data/files/2013/09/Vaillant_02.jpg) center;
  background-size: cover;
  height: 300px;
}


.dropdown:hover {
  display: block;
}


.dropdown {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: none;
  left: 290px;
  position: absolute;
  top: 60px;
  width: 160px;
  z-index: 1;
}

.dropdown__link {
  color: black;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown__link:hover {
  background-color: #f1f1f1
}

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet">
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type='text/javascript' src='js/script.js'></script>
    <title>Smart-Home</title>
  </head>
<body>
  <nav class="header">
    <div class="flex-container">
      <ul class="header__nav">
        <li class="header__nav-item header__nav-item--active">
          <a href="index.html">Strona Glowna</a>
        </li>
        <li class="header__nav-item">
          <a href="contact.html">O firmie</a>
        </li>
        <li class="header__nav-item header__nav-item--dropdownButton">
          <a href="contact.html">Produkty</a>
        </li>
        <li class="header__nav-item">
          <a href="contact.html">Nasi partnerzy</a>
        </li>
        <li class="header__nav-item header__nav-item--contact">
          <a href="contact.html">Kontakt</a>
        </li>
        <div class="dropdown">
          <a class="dropdown__link" href="#">Link 1</a>
          <a class="dropdown__link" href="#">Link 2</a>
          <a class="dropdown__link" href="#">Link 3</a>
        </div>
      </ul>
    </div>
  </nav>
  </body>
</html>

Answer 1

你不应该在 ul 中使用 div。它扰乱了列表元素的全部目的。

由于您使用的是 jQuery，因此这是使用 hover() 和 slideToggle() 的修改版本：

$('.header__nav > li ').hover(function(){
  $(this).find('ul').slideToggle();
})

html,
body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.flex-container {
  margin: 0 auto;
  max-width: 1024px;
  min-width: 320px;
  padding: 0 10px;
}

.header {
  background-color: #333;
}

.header__nav {
  height: 60px;
  letter-spacing: 2.6px;
  line-height: 60px;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.header__nav-item {
  display: block;
  float: left;
}

.header__nav-item a {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 400;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s linear;
}

.header__nav-item--active a {
  background-color: #ffffff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item a:hover {
  background-color: #ffffff;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.header__nav-item--dropdownButton {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-decoration: none;
  text-transform: uppercase;
}

.header__nav-item--contact {
  float: right;
}

.header__nav-item--dropdownButton:hover~.dropdown {
  display: block;
}

.jumbotron {
  background: url(http://www.mathiasgerlach.com/data/files/2013/09/Vaillant_02.jpg) center;
  background-size: cover;
  height: 300px;
}

.dropdown:hover {
  display: block;
}

.dropdown {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
  left: 290px;
  position: absolute;
  top: 60px;
  width: 160px;
  z-index: 1;
  padding: 0;
  margin: 0;
}

.header__nav-item .dropdown__link {
  color: black;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.header__nav-item .dropdown__link:hover {
  background-color: #f1f1f1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header">
  <div class="flex-container">
    <ul class="header__nav">
      <li class="header__nav-item header__nav-item--active">
        <a href="index.html">Strona Glowna</a>
      </li>
      <li class="header__nav-item">
        <a href="contact.html">O firmie</a>
      </li>
      <li class="header__nav-item header__nav-item--dropdownButton">
        <a href="contact.html">Produkty</a>
        <ul class='dropdown'>
          <li><a class="dropdown__link" href="#">Link 1</a></li>
          <li><a class="dropdown__link" href="#">Link 2</a></li>
          <li><a class="dropdown__link" href="#">Link 3</a></li>
        </ul>
      </li>
      <li class="header__nav-item">
        <a href="contact.html">Nasi partnerzy</a>
      </li>
      <li class="header__nav-item header__nav-item--contact">
        <a href="contact.html">Kontakt</a>
      </li>

    </ul>
  </div>
</nav>

在悬停时将向下滑动添加到导航栏

Adding slide down to the navbar on hover

css

jquery

transition

slidedown