需要製作3級純CSS菜單

我製作了2級純CSS菜單。但是現在我需要將它製作成3級。我嘗試了很多次，但是沒有爲我工作。這裏是jsfiddle。我不需要任何jQuery代碼，只需要純CSS。需要製作3級純CSS菜單

CSS

#menu { 
    width: 980px; 
    height: 30px; 
    float: left; 
    border-top: dashed 1px #d8d8d8; 
    margin-left: 7px; 
} 
#menu ul.Mainmenu { 
    width: 996px; 
    margin: 0px; 
    padding: 0px; 
    margin-top: 10px; 
} 
#menu ul.Mainmenu li { 
    float: left; 
    list-style: none; 
    margin-right: 20px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 14px; 
    color: #860300; 
    margin-right: 16px\9; /* IE8 and below */ 
    position: relative; 
    height: 30px; 
} 
#menu ul.Mainmenu li a { 
    text-decoration: none; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 13px; 
    color: #860300; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 25px; 
    left: -10px; 
    width: 190px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 

    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -ms-transition: opacity 0.5s; 
    -o-transition: opacity 0.5s; 
    -transition: opacity 0.5s; 
    z-index: 100000; 
    width: 200px; 
    background-color: #FFF; 
    padding: 7px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 
ul li ul li { 

    color: #fff; 
    float: left; 
    width: 190px; 
    height: auto !important; 
    min-height: 20px; 
    margin-bottom: 9px; 
    line-height: 18px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    padding-top: 3px; 
    padding-left: 3px; 
} 
ul li ul li a { 

    color: #fff; 
    font-size: 12px !important; 
} 
ul li ul li:hover { 
    background: #820B06; 
    color: #FFF; 
} 
ul li ul li:hover a { 
    color: #FFF !important; 
} 
ul li:hover ul { 

    opacity: 1; 
    visibility: visible; 
}

謝謝你們

來源

2014-02-19 Mohamed Samy

在這裏，我加入樣品CSS菜單與第3級，請檢查並讓我知道。希望它對你有幫助。謝謝。

<!DOCTYPE HTML> 
<html> 
<head> 
<style ="text/css"> 
/* Menu Styles */ 

.third-level-menu 
{ 
    position: absolute; 
    top: 0; 
    right: -150px; 
    width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.third-level-menu > li 
{ 
    height: 30px; 
    background: #999999; 
} 
.third-level-menu > li:hover { background: #CCCCCC; } 

.second-level-menu 
{ 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.second-level-menu > li 
{ 
    position: relative; 
    height: 30px; 
    background: #999999; 
} 
.second-level-menu > li:hover { background: #CCCCCC; } 

.top-level-menu 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.top-level-menu > li 
{ 
    position: relative; 
    float: left; 
    height: 30px; 
    width: 150px; 
    background: #999999; 
} 
.top-level-menu > li:hover { background: #CCCCCC; } 

.top-level-menu li:hover > ul 
{ 
    /* On hover, display the next level's menu */ 
    display: inline; 
} 


/* Menu Link Styles */ 

.top-level-menu a /* Apply to all links inside the multi-level menu */ 
{ 
    font: bold 14px Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
    text-decoration: none; 
    padding: 0 0 0 10px; 

    /* Make the link cover the entire list item-container */ 
    display: block; 
    line-height: 30px; 
} 
.top-level-menu a:hover { color: #000000; } 
</style> 
</head> 
<body> 
    <ul class="top-level-menu"> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li> 
     <a href="#">Offices</a> 
     <ul class="second-level-menu"> 
      <li><a href="#">Chicago</a></li> 
      <li><a href="#">Los Angeles</a></li> 
      <li> 
      <a href="#">New York</a> 
      <ul class="third-level-menu"> 
       <li><a href="#">Information</a></li> 
       <li><a href="#">Book a Meeting</a></li> 
       <li><a href="#">Testimonials</a></li> 
       <li><a href="#">Jobs</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Seattle</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</body> 
</html>

我也把一個現場演示，這是可用Here

來源

2014-02-19 11:21:33 Jeba

玩參見本example

CSS

#nav ul{ 
margin:0; 
padding:0; 
list-style:none; 
    } 
    #nav ul li{ 
margin:0; 
padding:10px 20px; 
position:relative; 
height:20px; 
line-height:20px; 
background-color:#EEE; 
    } 
    #nav > ul > li { 
float: left; 
height:30px; 
line-height:30px; 
background-color:#CCC; 
    } 
    #nav li > ul{ 
visibility:hidden; 
width:200px; 
position: absolute; 
top:0px; 
left:200px; 
border-left:1px solid #000; 
    } 
    #nav > ul > li > ul{ 
top:50px; 
left:0; 
    } 
    #nav li:hover{ 
background-color:#999; 
    } 
    #nav li:hover > ul{ 
visibility:visible; 
    }

HTML

<div id="nav"> 
<ul> 
    <li>Level 1 
     <ul> 
      <li>Level 2-1</li> 
      <li>Level 2-2 
       <ul> 
        <li>Level 3-1</li> 
        <li>Level 3-2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2014-02-19 11:27:34

需要製作3級純CSS菜單

回答

相關問題