多級（下拉式）菜單css js

我想要多級（下拉式）菜單，，這樣我就可以將菜單更改爲一個文件，而不必每頁都去改變菜單。我需要三級菜單。多級（下拉式）菜單css js

我已經修改別人的代碼，但沒有工作，因爲我喜歡

CSS代碼（OurSite.css）

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

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

ul#third-level-menu > li:hover { background: #CCCCCC; } 

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

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

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

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

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


/* Menu Link Styles */ 

ul#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; 
} 

ul#top-level-menu a:hover { color: #000000; }

我也有 js代碼（菜單式的script.js）

document.getElementById("nav01").innerHTML = 
"<ul id='top-level-menu'>" + 
"<li><a href='index.html'>Home</a></li>" + 

"<ul id='second-level-menu'>" + 
"<li><a href='index12.html'>Home12</a></li>" + 


"<ul id='third-level-menu'>" + 
"<li><a href='index123.html'>Home123</a></li>" + 
"<li><a href='index124.html'>Home124</a></li>" + 
"</ul>" + 

"<li><a href='index13.html'>Home13</a></li>" + 

"</ul>" + 

"<li><a href='customers.html'>Data</a></li>" + 
"<li><a href='about.html'>About</a></li>" + 
"</ul>";

對於HTML代碼

<!DOCTYPE html> 

<html> 
<head> 
    <title>Demo</title> 
    <link href="OurSite.css" rel="stylesheet"> 
</head> 
<body> 
    <nav id="nav01"></nav> 
    <div id="main"> 
    <h1>Welcome to Our Site</h1> 
    <h2>Web Site Main Ingredients:</h2> 

    <p>Pages (HTML)</p> 
    <p>Style (CSS)</p> 
    <p>Code (JavaScript)</p> 
    </div> 
    <script src="Menu-Script.js"></script> 
</body> 
</html>

或者，如果你有一個更好的代碼pleaes讓我知道，非常感謝

來源

2015-04-16 Hillary Rosy

http://cssmenumaker.com/builder/5435486，訪問這個網站，你可以創建自己的多級菜單 – Robin

http://stackoverflow.com/questions/9100344/pure -css-multi-level-drop-down-menu 你在找那種東西嗎？這可能是一個開始。 – WakeskaterX

呃... ...你的代碼是不是最好的，但是，我想你只改變內部JS的HTML：

document.getElementById("nav01").innerHTML = 
"<ul id='top-level-menu'>" + 
"<li><a href='index.html'>Home</a>" + // not close li here 

"<ul id='second-level-menu'>" + 
"<li><a href='index12.html'>Home12</a>" + // not close li here 


"<ul id='third-level-menu'>" + 
"<li><a href='index123.html'>Home123</a></li>" + 
"<li><a href='index124.html'>Home124</a></li>" + 
"</ul></li>" + // close li here 

"<li><a href='index13.html'>Home13</a></li>" + 

"</ul></li>" + // close li here 

"<li><a href='customers.html'>Data</a></li>" + 
"<li><a href='about.html'>About</a></li>" + 
"</ul>";

插入<ul>在他的父母<li>內。

[ul] 
-> li 
    [ul] 
    -> li 
     [ul] 
     -> li 
     -> li 
-> li 
-> li

例子：http://fiddle.jshell.net/9tok0z5d/

來源

2015-04-16 12:20:11 Frogmouth

我測試過它在Chrome和FireFox中運行良好，但不是IE11。如果你知道如何解決這個問題。讚賞。 –

多級（下拉式）菜單css js

回答

相關問題