周末发生了很多事情，果然计划不如变化快，但是对这条路的坚定不会改变。《当幸福来敲门》里有一句话“Don't ever let somebody tell you you can't do something” ，共勉。也许会遇到质疑，也许会自我怀疑，但是我相信只要坚定的做自己喜欢做的事情，坚定自己的信仰，结果不会差的。otherwise,what else could I do? .今天在微博里也自勉的给自己灌了一段鸡汤。“ No miracle has ever happened in my life, not this time, wish I can make it .I won't let meself down. I know maybe this is a wrong way for me, but I don't want to say "if" in ten years. nothing is too late.”
闲话不多扯，前两天学了二级菜单的制作，竖形的耳机菜单和横形的二级菜单，每种效果做了两个demo。 其实这是前天做的，但是因为一些事情，现在才贴上来，，给各位新人分享一下，有什么问题请指正。谢谢。
一， 竖形的二级菜单。
效果如下： （如果竖起来，好像在竖中指，O(∩_∩)O）
代码部分：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
*{padding:0px; margin:0px; list-style:none}
body {width:100%; height:1000px;}
#main {width:100px; height:160px; margin:100px auto;background:#ccc;position:fixed;top:100px; left:10px;}
#menu>ul>li {width:100px; height:40px;position:relative; line-height:40px;text-align:center;}
#menu>ul>li>a {display:block;height:39px; width:100px; text-decoration:none; background:#f0f;border-bottom:1px solid #fff; }
#menu>ul>li>a:hover{background:#f985f9;}
#menu>ul>li .show {width:300px;height:39px; position:absolute;left:100px;top:0px;display:none;}
.sec-menu{width:100px; height:39px; background:#f0f; }
#menu>ul>li:hover .show {display:block;}
.sec-menu {float:left;}
.sec-menu a{display:block; text-decoration:none;}
.sec-menu a:hover {background:#f985f9;height:39px;}
</style>
</head>
<body>
<div id=main>
<div id="menu">
<ul>
<li><a href="#">春天</a>
<ul class="show">
<li class="sec-menu"><a href="#">一月</a></li>
<li class="sec-menu"><a href="#">二月</a></li>
<li class="sec-menu"><a href="#">三月</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">夏天</a>
<ul class="show">
<li class="sec-menu"><a href="#">四月</a></li>
<li class="sec-menu"><a href="#">五月</a></li>
<li class="sec-menu"><a href="#">六月</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">秋天</a>
<ul class="show">
<li class="sec-menu"><a href="#">七月</a></li>
<li class="sec-menu"><a href="#">八月</a></li>
<li class="sec-menu"><a href="#">九月</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">冬天</a>
<ul class="show">
<li class="sec-menu"><a href="#">十月</a></li>
<li class="sec-menu"><a href="#">十一月</a></li>
<li class="sec-menu"><a href="#">十二月</a></li>
<br style="clear:both;"/>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
其中用了相对定位和绝对定位把二级菜单相对于对应的一级菜单固定。 （一级菜单的li元素设置相对定位，没有left top值，二级菜单的li设置相对于一级菜单li 的绝对定位，left：(一级菜单的宽度)px; top:0px.）。其实，我发现我现在做一些布局频繁的使用float和定位，不知道这是不是正确的，但是总觉得心里慌慌的，就像是玩了个小把戏就做出了效果一样。如果各位网友在布局方面有更好的建议，烦请指教。
二， 横形二级菜单的制作。
效果如下。
代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角框的制作</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style:none;}
#main {width:209px; margin:20px 0px 0px 100px;;}
#main .menu{ height:29px; width:209px;}
#main .menu h2 {height:29px; background:url(images/menu_titlebg.gif) repeat-x 0px -58px; color:#fff; margin-bottom:1px; }
#main .menu h2 strong{ display:block;height:29px;background:url(images/menu_titlebg.gif) no-repeat }
#main .menu span{display:block;height:29px;display:block;height:29px;background:url(images/menu_titlebg.gif) no-repeat
right -29px;font-size:15px; text-align:center; line-height:29px;}
#main .menu .list {background:url(images/menu_bottom.gif) repeat-y; }
.list>ul {background:url(images/menu_bottom.gif) no-repeat -209px bottom; padding:16px 0px 15px 0px;}
.list>ul>li>a{color:#000; display:block;height:29px;text-decoration:none; font-size:12px; color:#434343; border-bottom:1px solid #fff;
line-height:29px;font-weight:bold;text-align:center;}
.list ul a:hover{color:#b20e00;border-bottom:1px solid #b20e00; background:#fae191;}
.list>ul>li {position:relative; }
#main>.menu>.list>ul>li:hover .list-sec{display:block;}
#main .list .menu-sec .list-sec {height:29px; width:70px;float:left; background:#ffeeb7;display:none; }
#main .list .menu-sec .list-sec a{display:block;width:70px;height:29px;text-decoration:none;color:#434343; line-height:29px; font-size:12px; font-weight:bold;text-align:center;}
#main .list .menu-sec .list-sec a:hover {border-bottom:1px solid #b20e00; color:#b20e00;}
#main .list .menu-sec {position:absolute;left:209px;top:0px;width:210px;height:29px;}
</style>
</head>
<body>
<div id="main">
<div class="menu">
<h2><strong><span>Browse Categories</span></strong></h2>
<div class="list">
<ul>
<li><a href="#">Lorem ipsum dolor sit </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Amet consectetur </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Adipiscin elit </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Cras suscipit lacus </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Dapibus ante mattis </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Adipiscing nibh placerat </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Cras bibendum </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Porta diam elit</a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Adipiscing nibh placerat</a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Cras bibendum </a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
<li><a href="#">Porta diam elit</a>
<ul class="menu-sec">
<li class="list-sec"><a href="#">Monday</a></li>
<li class="list-sec"><a href="#">Tuesday</a></li>
<li class="list-sec"><a href="#">Wensday</a></li>
<br style="clear:both;"/>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
对于横形的二级菜单的制作，只是相对于竖形改了一点点。 让一级菜单li左飘浮，然后二级菜单li元素相对于一级菜单绝对定位。
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
