如何制作子菜单的子菜单项目

我想制作此菜单的第二级或第三级菜单项。我尝试在最后一个菜单，即联系，但第一个子菜单级别工作良好，但是当我尝试使第二或第三级子菜单它不工作plx plx一些身体帮助我这一点。 Thnx提前。如何制作子菜单的子菜单项目

.nav { 
 
    /*background-color:#52edc7;*/ 
 
\t background-color:transparent; 
 
    width:auto; 
 
    } 
 
    
 
.nav ul { 
 
    margin:0; 
 
    padding:0; 
 
    } 
 
    
 
.nav ul li { 
 
    list-style:none; 
 
    display:inline-block; 
 
    margin:0; 
 
    } 
 
    
 
.nav ul li a { 
 
    display:block; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    padding:10px 30px 10px 30px; 
 
    color:#52b4ed; 
 
    font-size:18px; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    transition: color 0.5s, background 0.5s; 
 
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */ 
 
    } 
 
     
 
.nav ul li:hover a { 
 
    color:#52b4ed; 
 
    padding-bottom:10px; 
 
    background-color:#242740; 
 
    transition: color 0.5s, background 0.5s; 
 
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */ 
 
\t -moz-transition: color 0.5s, background 0.5s; 
 
\t -0-transition: color 0.5s, background 0.5s; 
 
    } 
 
\t .nav ul li ul { 
 
    display:none; 
 
    } 
 
     
 
.nav ul li:hover ul { 
 
    z-index:2; 
 
    position:absolute; 
 
    display:block; 
 
} 
 
    
 
.nav ul li ul 
 
{ 
 
    position:relative;  
 
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
 
} 
 
.nav ul li ul:before, .nav ul li ul:after 
 
{ 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); 
 
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); 
 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
 
    top:50%; 
 
    bottom:0; 
 
    left:10px; 
 
    right:10px; 
 
    -moz-border-radius:100px/10px; 
 
    border-radius:100px/10px; 
 
\t 
 
} 
 
    
 
.nav ul li ul li { 
 
    list-style:none; 
 
    display:block; 
 
    float:none; 
 
\t color:#000; \t 
 
\t 
 
\t } 
 
    
 
.nav ul li ul li:hover a { 
 
    color:#d73914; 
 
    padding-bottom:10px; 
 
    background-color:#fff; 
 
    transition: color 0.5s, background 0.5s; 
 
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */ 
 
    } 
 
    
 
.nav ul li ul li {} 
 
    
 
.nav ul li ul li a { 
 
    padding:5px 15px 5px 15px; 
 
    text-align:left; 
 
\t 
 
    } 
 
    
 
.nav ul li ul li a i { 
 
    min-width:20px; 
 
    padding-right:10px; 
 
\t 
 
    } 
 
\t .nav li > a:after { content: ' »'; } 
 
    
 
    
 
.nav > li > a:after {content: ' »'; } 
 
    
 
    
 
.nav li > a:only-child:after {content: ''; } 
 
.nav ul .active { 
 
    color:#FFF; 
 
}

<nav class="nav"> 
 
    <ul> 
 
    <li><a href="#"><i class="fa fa-location-arrow fa-2x"></i><Br/>Home</a></li> <li><a href="#"><i class="fa fa-male fa-2x"></i><Br/>About</a> 
 
    \t <ul> 
 
      <li><a href="#"><i class="fa fa-plus fa-1x"></i>Company</a></li> 
 
      <li><a href="#"><i class="fa fa-eye fa-1x"></i>Team</a></li> 
 
     </ul> 
 
    </li> 
 
    
 
    
 
     
 
     <li><a href="#"><i class="fa fa-envelope fa-2x"></i><Br/>Contact Us</a> 
 
\t \t \t <ul> 
 
      <li><a href="#"><i class="fa fa-plus fa-1x"></i>USA</a> 
 
\t \t \t <ul> 
 
      <li><a href="#"><i class="fa fa-plus fa-1x"></i>LA</a></li> 
 
      <li><a href="#"><i class="fa fa-eye fa-1x"></i>NY</a></li> 
 
     </ul> 
 
\t \t </li> 
 
      <li><a href="#"><i class="fa fa-eye fa-1x"></i>Other</a></li> 
 
     </ul></li> 
 
    </ul> 
 
</nav>

来源

2015-09-13 Dami

什么是理想的结果呢？ –

目前它只显示第一个子菜单，显示联系我们子菜单美国和其他，但它重叠美国子菜单，即洛杉矶或纽约。总之它只显示第一个子菜单，但第二个子菜单显示不正确。我想要的结果是美国子菜单LA或NY – Dami

请帮我子子菜单 – Dami

这是你想要的吗？

.nav * { 
 
    float: left; 
 
    display: inline-block; 
 
    padding: 0; margin: 0; 
 
    list-style:none; 
 
    position: relative; width:auto; 
 

 
} 
 
.nav ul li:hover{ 
 
    color:#52b4ed; 
 
    padding-bottom:10px; 
 
    background-color:#242740; 
 
    transition: color 0.5s, background 0.5s; 
 
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */ 
 
\t -moz-transition: color 0.5s, background 0.5s; 
 
\t -0-transition: color 0.5s, background 0.5s; 
 
    display: block; 
 
    
 
} 
 
.nav a { 
 
    display:block; 
 
    color:#52b4ed; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    padding:10px 30px 10px 30px; 
 
    font-size:18px; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    transition: color 0.5s, background 0.5s; 
 
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */ 
 
} 
 

 
.nav li a:after { content: ' »'; } 
 

 
.firstlevel ul { 
 
    position: absolute; 
 
} 
 
/*first level*/ 
 
.firstlevel > li > ul { 
 
    left: 0; 
 
    top: 100%; 
 
    width:200px 
 
} 
 

 
/*other levels*/ 
 
.firstlevel > li > ul > li ul { 
 
    left: 100; 
 
    top: 0%; 
 
    width:100%; 
 
} 
 
/*hide and show on hover*/ 
 
.firstlevel li > ul li { 
 
    display: none; 
 
} 
 
.firstlevel li:hover > ul > li {color:#52b4ed; 
 
    padding-bottom:10px; 
 
    background-color:#242740; 
 
    transition: color 0.5s, background 0.5s; 
 
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */ 
 
\t -moz-transition: color 0.5s, background 0.5s; 
 
\t -0-transition: color 0.5s, background 0.5s; 
 
    display: block; 
 
} 
 
.firstlevel li> ul > li:hover{ 
 
    background-color:#fff; 
 
} 
 
.firstlevel li> ul > li:hover a{ 
 
    color:#d73914; 
 
} 
 
.firstlevel li> ul li:hover>ul li{background-color:#fff} 
 
.firstlevel li> ul li:hover>ul li a{color:#d73914;}

<nav class="nav"> 
 
    <ul class="firstlevel"> 
 
    <li><a href="#"><i class="fa fa-location-arrow fa-2x"></i><Br/>Home</a></li> <li><a href="#"><i class="fa fa-male fa-2x"></i><Br/>About</a> 
 
    \t <ul> 
 
      <li><a href="#"><i class="fa fa-plus fa-1x"></i>Company</a></li> 
 
      <li><a href="#"><i class="fa fa-eye fa-1x"></i>Team</a></li> 
 
     </ul> 
 
    </li> 
 
    
 
    
 
     
 
     <li> 
 
      <a href="#"><i class="fa fa-envelope fa-2x"></i><Br/>Contact Us</a> 
 
\t \t \t <ul> 
 
       <li><a href="#"><i class="fa fa-plus fa-1x"></i>USA</a> 
 
        <ul> 
 
      <li><a href="#"><i class="fa fa-plus fa-1x"></i>LA</a></li> 
 
        <li><a href="#"><i class="fa fa-eye fa-1x"></i>NY</a></li></ul> 
 
\t \t \t <ul> 
 
       
 
     </ul> 
 
\t \t </li> 
 
      <li><a href="#"><i class="fa fa-eye fa-1x"></i>Other</a> 
 
       <ul> 
 
      <li><a href="#"><i class="fa fa-plus fa-1x"></i>LA</a></li> 
 
      <li><a href="#"><i class="fa fa-eye fa-1x"></i>NY</a></li> 
 
     </ul> 
 
       </li> 
 
     </ul></li> 
 
    </ul>

fiddle demo

来源

2015-09-13 13:50:15 vbouk

thnks你的帮助我很开心 – Dami

我没有把所有的造型，但我得到你的子菜单的工作。不知道'其他'应该去哪里？

nav { 
 
    margin-top: 15px 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
nav ul a { 
 
    display: block; 
 
    color: blue; 
 
    text-decoration: none; 
 
    font-weight: 700; 
 
    font-size: 12px; 
 
    line-height: 32px; 
 
    padding: 0 15px; 
 
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 
nav ul li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
nav ul li:hover { 
 
    color: #52b4ed; 
 
    background-color: #242740; 
 
} 
 
nav ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px 
 
} 
 
nav ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 
nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #fff; 
 
    padding: 0 
 
} 
 
nav ul ul li { 
 
    float: none; 
 
    width: 92px; 
 
} 
 
nav ul li:hover > ul { 
 
    display: block 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    width: 10em; 
 
} 
 
.nav a { 
 
    padding: 10px 15px; 
 
    color: #ffb732; 
 
    font-weight: 900 
 
} 
 
.nav a:hover { 
 
    background-color: #ffc55a; 
 
    color: #33b3a6; 
 
    font-weight: 900 
 
} 
 
.nav li { 
 
    position: relative; 
 
} 
 
.nav > li { 
 
    float: left; 
 
    border-top: 1px solid #6bf4e5; 
 
} 
 
.nav > li > .parent { 
 
    background-image: url(../images/downArrow.png); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
} 
 
.nav > li > a { 
 
    display: block 
 
} 
 
.nav li ul { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
.nav > li.hover > ul { 
 
    left: 0; 
 
} 
 
.nav li:hover ul { 
 
    left: 100px; 
 
    top: 0; 
 
} 
 
.nav li ul a { 
 
    display: block; 
 
    background-color: #c1f5ef; 
 
    position: relative; 
 
    z-index: 100; 
 
    border-top: 1px solid #66e6d9; 
 
    overflow-y: none; 
 
    font-weight: 560; 
 
} 
 
.nav li ul li ul a { 
 
    background-color: #e0faf7; 
 
    z-index: 200; 
 
    border-top: 1px solid #707070; 
 
    overflow-y: none; 
 
} 
 
li.parent, 
 
ul.parent { 
 
    -webkit-padding-start: 0 !important; 
 
    -moz-padding-start: 0 !important; 
 
    color: #c1f5ef; 
 
} 
 
ul.parent { 
 
    display: inline-block; 
 
}

<nav> 
 
<ul> 
 
    <li ><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact Us</a> 
 
    <ul> 
 
     <li><a href="#">USA &nbsp; &nbsp; >></a> 
 
      <ul> 
 
       <li><a href="#">NY</a></li> 
 
       <li><a href="#">LA</a></li> 
 
       
 
      </ul> 
 
      </li> 
 
     <li><a href="#">Other</a></li> 
 
      
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    
 

 
</nav>

Fiddle

来源

2015-09-13 13:31:31

http://jsfiddle.net/RachGal/prn2dbt1/1/？ –

thnks您的帮助也，我真的很感谢您的努力 – Dami

如何制作子菜单的子菜单项目

回答

相关问题