带子菜单的一行垂直菜单。纯粹的CSS [英] One-line vertical menu with submenus. Pure CSS
本文介绍了带子菜单的一行垂直菜单。纯粹的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带垂直导航栏的丑陋网站。 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>
< link rel =stylesheethref =design.css>
< / head>
< body>
< div id =window>
< nav id =nav_wrap>
< div id =navigation>
< ul class =top-level>
< li>< a href =＃>主页< / a>
< ul class =sub-level>
< li>< a href =＃>子菜单项目1< / a>< / li>
< li>< a href =＃>子菜单项目2< / a>< / li>
< li>< a href =＃>子菜单项目3< / a>< / li>
< li>< a href =＃>子菜单项目3< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>关于< / a>< / li>
< li>< a href =＃>联络人< / a>< / li>
< li> < a href =＃>常见问题< / a>
< ul class =sub-level>
< li>< a href =＃>子菜单项目1< / a>
< / li>
< li>< a href =＃>子菜单项目3< / a>
< / li>
< / ul>
< / li>
< li> < a href =＃>新闻< / a>
< ul class =sub-level>
< li>< a href =＃>子菜单项目1< / a>< / li>
< li>< a href =＃>子菜单项目2< / a>< / li>
< li>< a href =＃>子菜单项目3< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
< / nav>
< / div>
< / body>
< / html>
CSS：
html，body {
background：＃78C2A9;
保证金：0 0 0 0;
}
#window {
height：630px;
width：1200px;
margin：20px auto 0 auto;
padding：0;
background：orange;
}
#nav_wrap {
width：150px;
height：630px;
保证金：0;
位置：绝对;
背景颜色：＃E95644;
}
#navigation {font-size：0.75em;宽度：150像素; }
#navigation ul {margin：0px;填充：0像素; }
#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;
光标：指针;
display：block;
height：25px;
line-height：25px;
text-indent：10px;
text-decoration：none;
宽度：100％;
}
#navigation a：hover {text-decoration：underline; }
#navigation li：hover {
background：＃f90;
职位：亲属;
}
ul.sub-level {display：none; }
li：hover .sub-level {
background：＃999;
border：#fff solid;
border-width：1px;
display：block;
位置：绝对;
left：75px;
top：5px;
}
ul.sub-level li {
border：none;
float：left;
width：150px;
解决方案
从现有的代码中删除一些CSS。最后一个声明和所有对位置：绝对的引用，在这种情况下。
DEMO http://jsfiddle.net/ZuC2W/1/
I have an ugly website with a vertical navigation bar. http://jsfiddle.net/ZuC2W/ Please help me edit the code so the nav bar looks like on this website: http://cssmenumaker.com/menu/slabbed-accordion-menu I mean, submenus appear under the buttons so the whole menu is one-lined and set in that red rectangle.
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;
}
解决方案
A quick way would be to remove some CSS from your existing code. The last declaration and all references to position: absolute, in this instance.
DEMO http://jsfiddle.net/ZuC2W/1/
这篇关于带子菜单的一行垂直菜单。纯粹的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
