书写基本样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {/* 清除自带边距 */margin: 0;padding: 0;}li {/* 清除li的默认样式 */list-style: none;}a {/* 清除a的下划线 */text-decoration: none;}.w960 {/* 设置宽高并居中 */height: 100px;width: 960px;margin: 0 auto;}.w960 li {width: 96px;height: 100px;/* 文字水平居中 */text-align: center;/* 文字垂直居中 */line-height: 100px;font-size: 25px;/* 左浮动横着排列 */float: left;/* 设置边框 */border-right: 1px solid white;/* 怪异盒模型防止盒子被撑大 */box-sizing: border-box;}.w960 li a {color: white;background-color: black;/* 给a标签转成块元素 */display: block;}/* 鼠标悬停改变颜色 */.w960 a:hover {background-color: red;}</style>
</head><body><div class="w960"><ul><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li></ul></div>
</body></html>运行结果：
第一步：更改HTML结构。
<div class="w960"><ul><li><a href="">首页</a><!-- 在li的里面啊标签的外面添加ul>li --><ul><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li></ul></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li></ul></div>运行结果：
第二步：设置css样式。
<style>
.w960 ul ul {background-color: black;/* 设置就绝对定位/相对定位 */position: absolute;/* 最关键的一步，设置隐藏 */display: none;}/* 当 ul>li 被鼠标悬停时 li>ul显现*/ul li:hover ul {/* 这里的display做显现作用 */display: block;}
</style>运行结果：
鼠标没悬停在li上时。ul被隐藏。
鼠标悬停在li上时。ul显现。
完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {/* 清除自带边距 */margin: 0;padding: 0;}li {/* 清除li的默认样式 */list-style: none;}a {/* 清除a的下划线 */text-decoration: none;}.w960 {/* 设置宽高并居中 */height: 100px;width: 960px;margin: 0 auto;}.w960 li {width: 96px;height: 100px;/* 文字水平居中 */text-align: center;/* 文字垂直居中 */line-height: 100px;font-size: 25px;/* 左浮动横着排列 */float: left;/* 设置边框 */border-right: 1px solid white;/* 怪异盒模型防止盒子被撑大 */box-sizing: border-box;}.w960 li a {color: white;background-color: black;/* 这里的display做a转块撑满li */display: block;}.w960 a:hover {background-color: red;}.w960 ul ul {background-color: black;/* 设置就绝对定位/相对定位 */position: relative;/* 最关键的一步，设置隐藏 */display: none;}/* 当 ul>li 被鼠标悬停时 li>ul显现*/ul li:hover ul {/* 这里的display做显现作用 */display: block;}</style>
</head><body><div class="w960"><ul><li><a href="">首页</a><!-- 在li的里面啊标签的外面添加ul>li --><ul><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li></ul></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li><li><a href="">首页</a></li></ul></div>
</body></html>码字不易点个赞再走吧~~~
