码迷,mamicode.com
首页 > Web开发 > 详细

Css下拉菜单设置

时间:2018-03-27 02:01:20      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:splay   one   相对   height   abs   top   text   适应   round   

<style type="text/css">

*{margin:0px;padding:0px;}设置所有标签属性《初始化页面属性》

#nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}

ui{list-style:none;} 去掉ul的默认样式

ui li{

float:left;左浮动

line-height:40px;垂直居中

text-align:center;水平居中

position:relative;//相对定位

 

}

a标签是行内元素

a{

text-decoration:none;取消下划线

color:#000;

display:block;变成块元素

width:90px;

padding:0  10px;自动适应

}

a:hover{

color:#fff;

background-color:#666;

}

ul li ul li{

float:none;//去掉浮动

border-left:none;

margin-top:2px;

background-color#eee;

}

ui li ul{

width:90px;

position:absolute;//绝对定位要配合top letf使用以浏览器来定位

left:0px;top:40px;

display:none;//隐藏

}

ul li :hover{display:block;//显示

}

</style>

<div id="nav">

<ul>

<li>首页</li>

<li>课程大厅

<ul>

<li>二级菜单</li>

</ul>

</li>

<li>学习中心</li>

<li>经典案例</li>

</ul>

<div>

Css下拉菜单设置

标签:splay   one   相对   height   abs   top   text   适应   round   

原文地址:https://www.cnblogs.com/LuoEast/p/8654940.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!