带有子菜单的单行垂直菜单。纯 CSS答案

【问题标题】：One-line vertical menu with submenus. Pure CSS带有子菜单的单行垂直菜单。纯 CSS
【发布时间】：2014-04-19 06:49:18
【问题描述】：

我有一个带有垂直导航栏的丑陋网站。 http://jsfiddle.net/ZuC2W/ 请帮我编辑代码，使导航栏在这个网站上看起来像这样：http://cssmenumaker.com/menu/slabbed-accordion-menu 我的意思是，子菜单出现在按钮下方，所以整个菜单是单行的，并设置为红色矩形。

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

【问题讨论】：

你只需要合并代码；我们不会为你做的:)
我格式化并对齐了您的 html 和 css 以使其更具可读性（我们中的一些人这样做是为了让新用户在提问时可以学习如何格式化他们的代码 :)

标签： html css

【解决方案1】：

一种快速的方法是从现有代码中删除一些 CSS。在本例中，最后一个声明和对position: absolute 的所有引用。

演示http://jsfiddle.net/ZuC2W/1/

【讨论】：

最后一个问题：如何仅使用 CSS 使其成为弹出菜单？