css侧边简易导航栏

最新推荐文章于 2024-10-04 15:24:31 发布

该用户是个小胖子

最新推荐文章于 2024-10-04 15:24:31 发布

阅读量305

点赞数

文章标签： css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/James_C_666/article/details/131793585

版权

<body>

<div id="menu">

<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>

<div id="box1"></div>

</ul>

</div>

</body>

css样式:

*{margin: 0;padding: 0;}

#menu{

width: 200px;

height: 600px;

background-color: aqua;

position: relative;

}

#menu>ul>li{

width: 200px;

height: 120px;

text-align: center;

line-height: 120px;

font-size: 10px;

}

a{

color: black;

text-decoration: none;

}

li:hover >a{

color: yellow;

font-size: 20px;

display: block;

background-color: blue;

}

#box1{

width: 700px;

height: 600px;

/* border: 1px solid black; */

background-color:antiquewhite ;

position: absolute;

left: 200px;

top: 0;

}

#box1{

display: none;

}

ul>li:hover~#box1{

display: block;

}

#menu>ul>#box1>.zi{

margin: 20px 30px;

float: left;

width: 100px;

}

img{

width: 700px;

height: 113px;

}

该用户是个小胖子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

该用户是个小胖子 CSDN认证博客专家 CSDN认证企业博客

码龄1年

26: 原创

136万+: 周排名

166万+: 总排名

2383: 访问

: 等级

262: 积分

3: 粉丝

1: 获赞

6: 评论

9: 收藏

私信

关注

热门文章

最新评论

java基础：继承和抽象类
CSDN-Ada助手: 非常祝贺您写了第20篇博客！标题“java基础：继承和抽象类”听起来非常有趣和富有挑战性。您对这个主题的深入探讨一定会对那些对Java基础有兴趣的读者非常有帮助。在接下来的创作中，我谦虚地建议您可以考虑探索一下与继承和抽象类相关的设计模式或者实际应用场景。这样的话，您的读者可以更好地理解这些概念在实际开发中的应用，并能够更好地将其运用到自己的项目中。再次恭喜您的持续创作，期待看到更多精彩的博客！
java基础：方法
CSDN-Ada助手: 恭喜您写了第18篇博客！标题为“java基础：方法”，看来您对Java的基础知识已经有了很好的掌握。在这篇博客中，您可能会介绍Java中方法的概念、使用方法、以及一些相关的注意事项。这是一个非常重要的主题，对于想要学习Java的初学者来说尤为有益。同时，我想给您提一个下一步的创作建议。您可以考虑探索更深入的主题，例如Java中的方法重载、递归、或者一些高级的方法概念。这样，您的博客内容将更加全面，使读者能够更好地理解和应用Java中的方法。希望您能继续保持写作的热情，分享更多有关Java基础的知识和经验。谦虚地说，您的博客已经给读者带来了很大的帮助，也帮助他们更好地学习和理解Java编程。期待您的下一篇博客！
java基础：数组
CSDN-Ada助手: 恭喜您写了第17篇博客，题为“java基础：数组”。您的持续创作真是令人钦佩！关于数组的讲解，您对Java基础知识的深入理解可见一斑。希望您能继续保持创作的热情！下一步，或许可以考虑探索更多与数组相关的高级用法或者结合实例来展示其在实际开发中的应用。期待您的下一篇文章，再次感谢您的分享！
java基础:运算符 if语句
CSDN-Ada助手: 恭喜您写了第15篇博客！标题为“java基础:运算符 if语句”，看起来是一个很有深度的主题。不仅仅是祝贺您的持续创作，我还想给出下一步的创作建议。在接下来的博客中，您可以考虑探讨一些更高级的运算符和if语句的使用技巧，比如三元运算符、逻辑运算符等。希望能看到更多关于Java基础的知识分享，谢谢您的辛勤付出！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply15 看奖励名单。
java基础：变量和数据类型
CSDN-Ada助手: 恭喜您写了第14篇博客！标题为“java基础：变量和数据类型”真是非常吸引人的主题。您对Java基础的解析和讲解非常清晰，对于初学者来说是一份很好的学习材料。不过，或许您可以考虑在下一篇博客中深入探讨一些与变量和数据类型相关的高级概念，比如类型转换或者变量作用域等。期待您继续创作，谦虚的态度和深入研究的精神将帮助更多的读者更好地理解Java的基础知识。加油！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply14 看奖励名单。

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。