Question

只是寻找一些建议让我的下拉导航在悬停时顺利下降，但似乎找到正确的方法。我尝试在下拉悬停中添加轻松过渡，但它似乎没有起作用。我确定我错过了一些简单的事情。

非常感谢任何建议，

https://jsfiddle.net/rufusbear/gkmhpskm/

<div class="main-nav">
      <div class="row">
        <nav>
          <ul class="navbar">
            <li><a href="#">About</a>
              <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Meet The Team</a></li>
                <li><a href="#">Facilities</a></li>
                <li><a href="#">Opening Times</a></li>
                <li><a href="#">Membership</a></li>
              </ul>
            </li>
            <li><a href="#">Diary</a>
            </li>
            <li><a href="#">Lessons</a>
            </li>
            <li><a href="#">Events</a>
              <ul>
                <li><a href="#">Corporate Days </a></li>
                <li><a href="#">Hens & Stags</a></li>
                <li><a href="#">Group Bookings</a></li>
              </ul>
            </li>
            <li><a href="#">Gallary</a>
            </li>
            <li><a href="#">Contact</a>

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





.main-nav {
  width: 100%;
  /* Spans the width of the page */
  height: 60px;
  margin-top: 1%;
  /* Ensures there is no space between sides of the screen and the menu */
  z-index: 99;
  /* Makes sure that your menu remains on top of other page elements */
  position: relative;
  background-color: #718373;
}

.navbar {
  height: 60px;
  padding: 0;
  margin: 0;
  position: absolute;
  /* Ensures that the menu doesn’t affect other elements */
}

.navbar li {
  height: auto;
  width: 150px;
  /* Each menu item is 150px wide */
  float: left;
  /* This lines up the menu items horizontally */
  text-align: center;
  /* All text is placed in the center of the box */
  list-style: none;
  /* Removes the default styling (bullets) for the list */
  font-size: 90%;
  padding: 0;
  margin: 0;
  background-color: #718373;
}

.navbar a {
  text-decoration: none;
  /* Removes the default hyperlink styling. */
  color: white;
  /* Text color is white */
  display: block;
  line-height: 60px;
}

.navbar li ul {
  display: none;
  /* Hides the drop-down menu */
  height: auto;
  margin: 0;
  /* Aligns drop-down box underneath the menu item */
  padding: 0;
  /* Aligns drop-down box underneath the menu item */
}

.navbar li:hover ul {
  display: block;
  /* Displays the drop-down box when the menu item is hovered over */
}

.navbar li ul li {
  background-color: #718373;
}

.navbar li ul li a:hover {
  border: 3px solid #fff;
  padding: 0;
}
.row {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

Answer 1

您可以使用CSS转换，也可以使用jQuery .show（）

Here is the documentation

Css Transition W3schools

Answer 2

@import url(http://weloveiconfonts.com/api/?family=entypo);
/*reset*/ul{list-style:none;}a{text-decoration:none;}ul,li,a{margin:0;padding:0;}

/***** basic styles *****/

body { background: #E0E0E0 url('http://subtlepatterns.com/patterns/creampaper.png');}

.container {
  position: relative;   
  width: 800px;
  margin: 30px auto;
}

.nav-container {
  width: 650px;
  margin: 0 100px;
}

p {
  font-family: Georgia;
  color: #333;
}

a {
  font-family: 'Helvetica', 'Arial', san-serif;
  color: #333;
}

/***** menu *****/
#navmenu {  
  display: inline-block;
  height: 30px;
  padding: 5px 0;

  border: solid 1px #A3A3A3;
  border-radius: 7px;
  box-shadow:  2px 2px 5px #ccc;
}

#navmenu > li { 
  border-color: #ADADAD;

  border-right: solid 1px #A3A3A3; 
  padding: 0 10px;
}

#navmenu li {
  float: left;
  position: relative;
  line-height: 30px; /* must match height of ul */
}

#navmenu li:hover span { color: #C89292; }
.nav-link {
  display: inline;
  margin: 0 10px 0 50px;
}

/* icon font */
[class*="entypo-"] { font-family: 'Entypo', sans-serif; }

#navmenu span[class*="entypo-"] {
  position: absolute;
  left: 15px;

  color: #8f8f8f;
  font-size: 1.5em;
}

/***** submenu *****/

/* submenu container */
#drop {
  opacity: 0;
  position: absolute;
  top: 35px;
  left: 0px;
  width: 150px;
  background: #333;
}

/* submenu links */
#drop li a { 
  background: #333; 
  color: #E0E0E0;
  font-size: 0.8em;
  margin-left: 10px;
}

/* height of submenu links */
#navmenu li:hover ul li {
  height: 30px;
  line-height: 30px;
}

/* submenu positioning */
#navmenu li:hover ul { opacity: 1; }
#drop li {
  float: none;
  position: static;
  height: 0;
  line-height: 0;
  background: none;
}

/* submenu transitions */
#navmenu li { transition: all 0.2s; }
#navmenu li a { transition: all 0.5s; }
#drop { transition: all 1s; }
#drop li { transition: height 0.5s; }

<div class = "container">
  <div class = "nav-container">
    <ul id="navmenu">
      <li><a href="#"><span class = "entypo-home"></span><span class = "nav-link">Home</span></a></li>
      <li><a href="#"><span class = "entypo-lamp"></span><span class = "nav-link">About</span></a></li>
      <li><a href="#" id = "submenu"><span class = "entypo-book-open"></span><span class = "nav-link">Products</span></a>
        <ul id = "drop" >
          <li><a href="#">Widgets</a></li>
          <li><a href="#">Thingamabobs</a></li>
          <li><a href="#">Doohickies</a></li>
        </ul>
      </li>
      <li><a href="#"><span class = "entypo-mail"></span><span class = "nav-link">
        Contact</span></a></li>
    </ul>
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  </p>
</div>

也许您想要这样的内容或请查看此链接： - http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu

导航下拉顺利过渡

2 个答案: