Question

我有一个带有垂直导航栏的丑陋网站。 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;
}

Answer 1

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

DEMO http://jsfiddle.net/ZuC2W/1/

带子菜单的单行垂直菜单。纯CSS

1 个答案: