我没用老师的那个padding方法 我自己给li设置了一个宽度 这样可行吗
*{
list-style:none; /*去掉li前边的小点*/
padding:0 0 0 0; /*浏览器默认有margin和padding的值 取消掉页面上的默认边距就没有了*/
margin:0 0 0 0;
}
a{
text-decoration:none; color:#000; /*把a标签的默认样式改了*/
display:block; /*变成块级元素 这样就会显示一个竖行的背景*/
width:92px; /*没有用老师的padding方法 自己定了一个宽度*/
}
a:hover{
color:red; /*鼠标移上去变成红色*/
background:#666;
}
.nav{
height:40px;
width:552px;
background:#eee;
margin:0 auto; /*让div在页面水平居中*/
text-align:center; /*让文字在li中居中*/
}
.nav>ul>li{
float:left;
height:40px;
/*padding:0 30px; 不设置宽度 这样元素超过宽度也不会自动换行到下一行*/
line-height:40px;
/*position:relative; 进行相对定位 取消了好像也没事*/
}
.nav>ul{
margin:0 0 0 0;
padding:0;
}
.nav>ul>li>ul>li{
background:#eee;
display:none; /*设置2级菜单隐藏*/
}
.nav>ul>li>ul{
/*position:absolute; 进行绝对定位*/
}
.nav>ul>li>ul>li>a:hover{ /*设置二级菜单的样式*/
background:#06f;
}
.nav ul li:hover li{
display:block; /*设置2级菜单鼠标移上去显示*/
}<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="nav"> <ul> <li><a href="#">首页</a> <li><a href="#">首页</a> <ul> <li><a href="#">javaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">首页</a> <ul> <li><a href="#">javaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </div> </body> </html>
没用padding方法 直接给a了一个宽度 这样也没用绝对定位和相对定位 直接二级菜单就在一级菜单下面了 真正项目中一般是padding来设置宽度还是直接把宽度定死 但是把宽度定死不好就是 内容长度不能超过宽度 要不会自动换行到下一行。
