摘要：本次作业过程中出现了一些问题，研究成果如下：常规（1）在a链接内添加无序列表ul li作为下拉列表；（2）样式：清除list-style，常态下不显示，鼠标上移至a链接时显示；（3）鼠标上移至列表上面时显示背景色。难点问题（1）列表定位 为了让下拉列表正常显示，a链接的定位方式为position: relative，ul为ab
本次作业过程中出现了一些问题，研究成果如下：
常规
（1）在a链接内添加无序列表ul li作为下拉列表；
（2）样式：清除list-style，常态下不显示，鼠标上移至a链接时显示；
（3）鼠标上移至列表上面时显示背景色。
难点问题
（1）列表定位
为了让下拉列表正常显示，a链接的定位方式为position: relative，ul为absolute。此处需特别注意，absolute应设置在ul上，如果设置在li上面，列表项无法正常显示（不显示，或只显示一项）。
（2）ul li的属性应该设置在ul上，还是li上？是设置在display：none后面，还是在hover的display：block后面？
ul标签下没有li的话，是不可见的，是否说明ul没有承载能力，属性应该设置在li上面？实际上，设置在ul上的属性已经完全遗传至li，可以说明ul是可以承载属性的。因此，position能够针对ul来设置。但是，为何设置在li上面无法达到预期效果？
既然display：none，还在其后面设置样式，会显示吗？实践证明是OK的；当然，设置在hover后面也是可以的。那么，哪里会更好？hover作为一个伪类，其承载能力有多大，一般浏览器的兼容性如何？个人观点，hover仅作为一个display开关挺好的，但不排除开/关之间样式有差异的情况。
（3）列表间距对齐问题
如果a链接使用margin: 0px 8px，且ul设置相同，会出现错位，而ul换成padding: 0px 8px却能实现想要的效果，margin与padding之间如何实现转换？
（4）列表拓展
列表里面如何多列布局？添加分割线？将display设置为inline-block未能实现。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tmall Navigation</title>
<link rel="stylesheet" type="text/css" href="css/fa/css/all.min.css"/>
<style type="text/css">
*{margin: 0px; padding: 0px;}/* 清除边距 */
.clear{clear: both;}/* 清除浮动 */
li{list-style: none;}/* 清除列表样式 */
.header{width: 100%; background: #F2F2F2;}
.hd_content{width: 1200px; margin: 0px auto; line-height: 25px;}
.ct_left{width:400px; float: left;}
.ct_right{width:700px; float: right; text-align: right;}
/* 链接样式 */
a{text-decoration:none; margin: 0px 8px; padding:0px 0px; display: inline-block; font-family: 宋体; font-size: 13px; color: #999999; position: relative;}
a:hover{color: #FF0036; text-decoration: underline; background: #FFFFFF; }
#text01:hover{text-decoration: none;}
/* 列表样式 */
ul{display: none; position: absolute; width: 90px; text-align: left; background-color: #FFFFFF; border: #0074CC solid 1px; border-top: none; padding: 0px 8px;}
a:hover ul{display: block;}
ul li:hover{background-color: #F2F2F2;}
</style>
</head>
<body>
<div class="header">
<div class="hd_content">
<div class="ct_left">
<a href=""><i class="fas fa-home" style="color: #FF0036;"></i> 天猫首页</a>
<a id="text01" href="" >喵，欢迎来天猫</a>
<a href="">请登录</a>
<a href="">免费注册</a>
</div>
<div class="ct_right">
<a href="">我的淘宝 <i class="fas fa-caret-down" aria-hidden="true"></i>
<ul>
<li>已买到的宝贝</li>
<li>已卖出的宝贝</li>
</ul>
</a>
<a href=""><i class="fas fa-shopping-cart" style="color: #FF0036;"></i> 购物车</a>
<a href="">收藏夹 <i class="fas fa-caret-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="">淘宝网</a>
<a href="">商家支持 <i class="fas fa-caret-down"></i>
<ul>
<li>商家中心</li>
<li>商家入驻</li>
</ul>
</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>END
批改老师：PHP中文网批改时间：2018-11-04 09:13:29
老师总结：总结的很认真，但是hover的作用不是仅作为一个display开关用的。在实际工程项目中，hove可以用于各种元素的鼠标覆盖特效
