body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子
<body>
<div id="top">
<div id="logo"><img src="images/22102.png" width="196" height="90" /></div>
<div id="menu">
<ul>
<li>网站首页</li>
<li>宁静致远
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>关于我们
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>净心枕芯
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>在线订购</li>
<li>人才招聘</li>
<li>联系我们</li>
</ul>
</div>
</div>
</body>css部分实现鼠标经过显示二级菜单
<style>
*{
margin:0px;
padding:0px;
}
#top{
width:950px;
height:800px;
margin:10px auto;
}
#logo{
width:196px;
height:90px;
float:left;
}
#menu{
width:700px;
height:90px;
float:right;
margin-top:20px;
}
#menu ul li{
float:left;
width:100px;
line-height:50px;
text-align:center;
list-style:none;
}
#menu li:hover{
background:#066;
}
#menu ul li ul li{
background:#99C;
height:35px;
line-height:38px;
}
#menu ul li ul li:hover{
background:#0C0;
}
#menu ul li ul{
display:none;
}
#menu ul li:hover ul{
display:block;
}
#menu ul li ul{
}
</style>通过display可以设置组件的是否显示
扫一扫
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
