Question

我试图在这里制作演示的导航栏http://www.templatemonster.com/demo/51129.html
HTML：

  <div class="main-container">
      <div class="top-nav-wrap">
        <div class="top-nav">
          <ul>
          <li class="border"><a href="#" >HOME</a></li>
          <li class="border submenu"><a href="#" >BLOG</a>
            <div class="submenu-wrap">
              <ul class="submenu-1">
              <li><a href="#">TESTIMONIALS</a></li>
              <li><a href="#">ARCHIVES</a></li>
              <li><a href="#">FAQS</a></li>

            </ul>
          </div>
          </li>
          <li class="border"><a href="#" >SERVICES</a></li>
          <li class="border"><a href="#" >OUR GALLERY</a></li>
          <li class="border"><a href="#" >CONTACTS</a></li>
        </ul>
      </div>
      </div>
      <div class="top-container">

      </div>
    </div>

CSS：

* {
  margin: 0;
  padding: 0;
}
body {
  background-image: url(../images/header-img.jpg);
  font-family: 'Roboto Condensed', sans-serif;
  height: 1900px;
}
.top-container {

  overflow: hidden;
}
.top-nav-wrap {
  width: 100%;

}
div.top-nav-scrolled.top-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
.top-nav {

  width: 1200px;
  margin: auto;
  /*overflow: hidden;*/
}

.top-nav ul {
  /*overflow: hidden;*/
  list-style: none;

}
.top-nav ul li {
  position: relative;
  float: left;
  padding-top: 30px;
  margin-left: 50px;
  padding-bottom: 10px;

}
.top-nav ul li:first-child {
  margin-left: 0;
}

.top-nav li a {

  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ba4b07;
}
.top-nav li.border::before {
  position: absolute;
  left: -25px;
  content: '\\';
  font-size: 20px;
  color: #ba4b07;
}

.top-nav li.border:first-child::before {
  content: '';
}
.top-nav li.border> a::after {
  position: absolute;
  top: -30px;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background:  #ba4b07;
  transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
  top:0px;
}


.submenu-wrap {
  height: 0px;
  position: absolute;
  top: 100%;
  overflow: hidden;
  transition: all 0.3s ease;

}
.submenu:hover > div {
  height: 100%;
}
ul.submenu-1 {
  width: 300px;
  padding-top: 15px;
  padding-bottom: 30px;

  background:#ba4b07;
}
ul.submenu-1 li{
  padding: 0px;
  float: none;
  margin: 0;
}
ul.submenu-1 li a {
  display: block;
  padding: 20px;
  color: white;
  font-size: 1em;
}

ul.submenu-1 li:hover {
  background: white;
}
ul.submenu-1 li:hover a {
  color: #ba4b07;
}

JS：

$(function(){

  $('.top-nav ul li a').on('mouseover',function(){
    $(this).addClass('hoverNav');
  }).on('mouseout',function(){
    $(this).removeClass('hoverNav');
  });

  $(window).on('scroll',function(){
    $('.top-nav-wrap').addClass('top-nav-scrolled');
    if($(window).scrollTop()==0){
      $('.top-nav-wrap').removeClass('top-nav-scrolled');
    }

  });



});

此处的问题是.submenu:hover > div height:100%;。我在这里看到很多关于身高100％的答案但是无法理解 height:100%此处div仅占整个products = products.Where(p => p.Brand.Equals(s) || p.CatCodeNaam.Equals(s) || p.SubCategoryName.Equals(s)).ToList();的一部分，而不是全部。{。} 我可以使用硬编码像素，但我的所有子菜单都有不同的大小并使用相同的类。编辑：此外使用高度：自动不会让我的CSS转换工作。和使用max-height一样我希望我的css过渡能够留下来。

Answer 1

将子菜单更改为height:auto，因此它会根据内部的子元素计算高度，如下所示。

更新以实现height transition，您可以尝试以下内容，height仍然是auto，但可transit使用{{} 1}}。

inner elements

检查更新的jsFiddle

Answer 2

您可以使用此代码帮助您。

<强> CSS

* {
  margin: 0;
  padding: 0;
}
body {
  background-image: url(../images/header-img.jpg);
  font-family: 'Roboto Condensed', sans-serif;
  height: 1900px;
}
.top-container {

  overflow: hidden;
}
.top-nav-wrap {
  width: 100%;

}
div.top-nav-scrolled.top-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
.top-nav {

  width: 1200px;
  margin: auto;
  /*overflow: hidden;*/
}

.top-nav ul {
  /*overflow: hidden;*/
  list-style: none;

}
.top-nav ul li {
  position: relative;
  float: left;
  padding-top: 30px;
  margin-left: 50px;
  padding-bottom: 10px;

}
.top-nav ul li:first-child {
  margin-left: 0;
}

.top-nav li a {

  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ba4b07;
}
.top-nav li.border::before {
  position: absolute;
  left: -25px;
  content: '\\';
  font-size: 20px;
  color: #ba4b07;
}

.top-nav li.border:first-child::before {
  content: '';
}
.top-nav li.border> a::after {
  position: absolute;
  top: -30px;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background:  #ba4b07;
  transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
  top:0px;
}


.submenu-wrap {
  /*height: 0px;*/
  position: absolute;
  top: 100%;
  overflow: hidden;
  /*transition: all 0.3s ease;*/
  display: none;

}
.submenu:hover > div {
 /* height: 100%;*/

}
ul.submenu-1 {
  width: 300px;
  padding-top: 15px;
  padding-bottom: 30px;

  background:#ba4b07;
}
ul.submenu-1 li{
  padding: 0px;
  float: none;
  margin: 0;
}
ul.submenu-1 li a {
  display: block;
  padding: 20px;
  color: white;
  font-size: 1em;
}

ul.submenu-1 li:hover {
  background: white;
}
ul.submenu-1 li:hover a {
  color: #ba4b07;
}

<强> JS

$(function(){

  $(".top-nav ul li").hover(function(){
    $(this).find(".submenu-wrap").slideToggle();
  });


 $('.top-nav ul li').on('mouseover',function(){
    $(this).children().addClass('hoverNav');
  }).on('mouseout',function(){
     $(this).children().removeClass('hoverNav');
  });

  $(window).on('scroll',function(){
    $('.top-nav-wrap').addClass('top-nav-scrolled');
    if($(window).scrollTop()==0){
      $('.top-nav-wrap').removeClass('top-nav-scrolled');
    }

  });
});

绝对定位元素的高度100％

2 个答案: