帶子菜單的單行垂直菜單。純粹的CSS

我有一個垂直導航欄的醜陋網站。 http://jsfiddle.net/ZuC2W/請幫我編輯代碼，使導航欄看起來像這個網站上：http://cssmenumaker.com/menu/slabbed-accordion-menu我的意思是，子菜單出現在按鈕下方，所以整個菜單是單線並設置在該紅色矩形中。帶子菜單的單行垂直菜單。純粹的CSS

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Title</title> 
    <link rel="stylesheet" href="design.css"> 
</head> 
<body>  
<div id="window"> 
    <nav id="nav_wrap"> 
     <div id="navigation"> 
      <ul class="top-level"> 
       <li><a href="#">Home</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a></li> 
         <li><a href="#">Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li> <a href="#">FAQ</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a> 
         </li> 
         <li><a href="#">Sub Menu Item 3</a> 
         </li> 
        </ul> 
       </li> 
       <li> <a href="#">News</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a></li> 
         <li><a href="#">Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 
</body> 
</html>

CSS：

html, body { 
    background:#78C2A9; 
    margin: 0 0 0 0; 
} 

#window { 
    height:630px; 
    width: 1200px; 
    margin: 20px auto 0 auto; 
    padding: 0; 
    background: orange; 
} 

#nav_wrap { 
    width: 150px; 
    height: 630px; 
    margin: 0; 
    position: absolute; 
    background-color: #E95644; 
} 

#navigation { font-size:0.75em; width:150px; } 
#navigation ul { margin:0px; padding:0px; } 
#navigation li { list-style: none; } 

ul.top-level { background:#666; } 

ul.top-level li { 
    border-bottom: #fff solid; 
    border-top: #fff solid; 
    border-width: 1px; 
} 

#navigation a { 
    color: #fff; 
    cursor: pointer; 
    display:block; 
    height:25px; 
    line-height: 25px; 
    text-indent: 10px; 
    text-decoration:none; 
    width:100%; 
} 

#navigation a:hover{ text-decoration:underline; } 

#navigation li:hover { 
    background: #f90; 
    position: relative; 
} 

ul.sub-level { display: none; } 

li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 75px; 
    top: 5px; 
} 

ul.sub-level li { 
    border: none; 
    float:left; 
    width:150px; 
}

來源

2014-04-18 user3415893

你只需要合併代碼;我們不會爲你做:) – user1477388

我格式化和對齊你的HTML和CSS，使其更具可讀性（我們中的一些人這樣做，使新用戶可以在提問時學習如何格式化他們的代碼:) – Roimer