Question

我使用了一个教程来制作这个导航，但我需要嵌套元素，我无法做到这是我在项目中使用的导航的精确副本，我无法在悬停时显示菜单我已经尝试过大约5个小时，所以这就是我想做的事。

想要下拉菜单

Jsfiddle

这是导航的html第一个菜单中的嵌套链接我需要css来显示它们

<nav class="sixteen columns">
            <div class="tab-container">
                <ul class="nav clearfix" >
                    <li><a href=# >About Us</a> 
                        <ul>
                            <li>Board of Trustees</li>
                            <li>Gallery</li>
                            <li>Media Coverage</li>
                            <li>Updates</li>
                            <li>Newsletter</li>
                            <li>About Us</li>
                            <li>Testimonials</li>
                            <li>See What We Are About</li>
                            <li>Contact Us</li>
                            <div class="clearfix"></div>
                        </ul>
                    </li>
                    <li ><a href=# >Academic Programs</a></li>                        
                    <li><a href=# >Outreach Programs</a></li>
                    <li><a href=# >Vocational Program</a></li>
                    <li><a href=# >Support Us</a></li>
                    <li><a href=# >Donate</a></li>
                </ul>
            </div>
</nav>

这是我正在使用的css需要设置样式

ul.nav{
  margin: 0;
  list-style-type : none;
  line-height : 42px;
  max-height: 42px;
  overflow: hidden;
  display: inline-block;
  padding-right: 20px
}
ul.nav > li:nth-child(n).active{
  z-index: 2;
  background: #fff;
  font-weight: bolder;
}
ul.nav > li:nth-child(n):hover{
  z-index: 2;
  background: #fff;
}
ul.nav>li:nth-child(1){
    background-color: #79fa6b;
}
ul.nav>li:nth-child(2){
    background-color: #70e663;
}

ul.nav>li:nth-child(3){
    background-color: #63cc58;
}

ul.nav>li:nth-child(4){
    background-color: #57b34d;
}

ul.nav>li:nth-child(5){
    background-color: #4b9942;
}

ul.nav>li:nth-child(6){
    background-color: #3e8037;
}

ul.nav > li{
  float : left;
  margin : 5px -10px 0;
  border-top-right-radius: 25px 170px;
  border-top-left-radius: 20px 90px;
  padding : 0 45px 0 45px;
  height: 170px;
  background: #787878;
  position : relative;
  box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

ul.nav > li > a{
  display: inline-block;
  max-width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #222;
}

ul.nav > li:before{
  content : '';
  background : transparent;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border-width: 10px;
  top: 0px;
  border-style : solid;
  position : absolute;
}
ul.nav > li:before{
  border-color : transparent transparent transparent;
  left: -23px;
}

ul.nav > li:after{
  border-color : transparent transparent transparent;
  -webkit-transform : rotate(-48deg);
  right: -17px;
}

chrome style tabbed navigation css3下拉菜单

0 个答案: