最简单简洁的网站开发教程之CSS二级悬浮菜单

最新推荐文章于 2024-04-02 12:37:14 发布

我是一株草我有三颗心

最新推荐文章于 2024-04-02 12:37:14 发布

阅读量570

点赞数

分类专栏：前端网站开发文章标签： Web 网站开发

本文链接：https://blog.csdn.net/weixin_44576310/article/details/89915713

版权

前端网站开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style type="text/css">

.sj:hover .show_list{
   z-index:auto;/*这里是层级，当你设置了某个图片或者其他时候放心他不显示，这时可以按F12浏览器可以打开开发工具可以查看是否存在，如果在就是层级太低被遮盖了*/
   position:absolute;/*absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位*/
   top:10px;/*顶顶位置*/
   left:-35px;/*左位置*/
   padding:50xp;/*对象和对象之间的距离*/
   display:block;/*将隐藏的对象显示出来*/
   text-align:left;/*对齐模式*/
   width:100%;/*对象百分百的宽度*/
}

.show_list{
   position:relative;/*relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
给第二个box设置relative：*/
   background:#333;/*背景颜色*/
   list-style:none;/*li的模式，这里是不需要*/
   display:none;/*将要设置的元素隐藏，不显示*/
}
</style>
</head>
<body>
<div>
<span class="sj">设计
<ul style="color: #FFFFFF" class="show_list">
<li>网页设计</li>
<li>

<a style="color:#00FFF3" href="https://blog.csdn.net/weixin_44576310">博客教程</a>
</li>
<li>室内设计</li>
</ul>
</span>
</div>
</body>
</html>

/!--参考地址：https://shop350343648.taobao.com/search.htm?spm=a1z10.1-c-s.0.0.5b4574b9ZAcQr0&search=y&orderType=hotsell_desc-->

我是一株草我有三颗心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最简单简洁的网站开发教程之CSS二级悬浮菜单

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"><!--hover是当鼠标靠近的时候执行的，...
复制链接

扫一扫