通过绝对定位与：hover实现的下拉框效果；一开始没什么大问题，效果也都实现了；但观察对应的项目发现其中的文字其实是超连接所以后续添加了超连接标签后就无法通过：hover进行展示了。
源代码
<div class="header-bottom">
<ul>
<a href="">
<li>首页</li>
</a>
<a href="#" class="all">
<li>所有商品</li>
<div class="allShopping">
<div class="shopIntroduce">
<img src="../img/nav1.jpg" alt="">
<p>浓情欧式</p>
</div>
<div class="shopIntroduce">
<img src="../img/nav2.jpg" alt="">
<p>浪漫美式</p>
</div>
<div class="shopIntroduce">
<img src="../img/nav3.jpg" alt="">
<p>雅致中式</p>
</div>
<div class="shopIntroduce">
<img src="../img/nav4.jpg" alt="">
<p>简约现代</p>
</div>
<div class="shopIntroduce">
<img src="../img/nav5.jpg" alt="">
<p>创意装饰</p>
</div>
</div>
</a>
<a href="#" class="wall">
<li>装饰摆件</li>
<div class="wallIntroduce">
<span>干花花艺</span>
<span>花瓶花器</span>
</div>
</a>
<a href="#" class="buyi">
<li>布艺软饰</li>
<div class="textLink">
<span>桌布罩件</span>
<span>保证靠垫</span>
</div>
</a>
<a href=""><li>墙饰壁挂</li></a>
<a href=""><li>蜡艺熏香</li></a>
<a href=""><li>创意家具</li></a>
</ul>
</div>
/* 设置下拉盒子样式 */
.header-bottom .wallIntroduce{
/* 固定展示盒子对应的位置 */
position: absolute;
font-size: 13px;
width: 100%;
top: 140px;
left: 0px;
padding: 20px;
padding-left: 380px;
background-color: #fff;
display: none;
}
/* 设置下拉盒子样式 */
.header-bottom .textLink{
/* 固定展示盒子对应的位置 */
position: absolute;
font-size: 13px;
width: 100%;
top: 140px;
left: 0px;
padding: 20px;
padding-left: 380px;
background-color: #fff;
display: none;
}
/* 上方连接触发时将下方的下拉框显示 */
.header-bottom .wall:hover .wallIntroduce{
display: block;
}
/* 上方连接触发时将下方的下拉框显示 */
.header-bottom .buyi:hover .textLink{
/* color: cadetblued */
display: block;
}
/* 设置下拉框中文本间距 */
.header-bottom .wallIntroduce span{
margin-left: 50px;
}
/* 设置下拉框中文本间距 */
.header-bottom .textLink span{
margin-left: 50px;
}
代码修改如下：在下拉框中添加了一个a标签的外侧标签后无法通过:hover显示下拉框
<a href="#" class="buyi">
<li>布艺软饰</li>
<div class="textLink">
<a href=""><span>桌布罩件</span></a>
<span>保证靠垫</span>
</div>
</a>
问题：a标签中不能嵌套a标签，因为a标签是行级元素，如果在a标签之中套用a标签的话浏览器会自动帮助a标签中的那个a标签提升等级，使其变为兄弟关系的标签。
<body>
<a href="">
哈哈
<a href="">你好</a>
</a>
<p>你好
<p>(ノ｀Д)ノ</p>
</p>
</body>
在浏览器中标签级别如图
解决方法：给a标签外部新增一个object标签
<body>
<a href="">
哈哈
<object data="" type="">
<a href="">你好</a>
</object>
</a>
<p>你好
<object data="" type="">
<p>(ノ｀Д)ノ</p>
</object>
</p>
</body>
现在标签的结构就是正确的了
object标签的定义和用法
定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
标签：hover,bottom,实现,标签,header,下拉框,left From： https://www.cnblogs.com/Zyatoer/p/17304135.html