li 布局 CSS样式

最新推荐文章于 2024-08-09 16:30:00 发布

不断学习的ITer

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量1.6k

点赞数

分类专栏： HTML特殊标签/CSS 文章标签： css div textbox class 浏览器 input

本文链接：https://blog.csdn.net/wyqlxy/article/details/6758663

版权

本文介绍了如何使用UL, LI, DIV创建下拉菜单，并通过CSS样式实现跨浏览器兼容。关键点在于设置parentMenu的position:relative和HiddenMenu的position:absolute, left:0, top:100%。还提到了IE7中z-index的问题，解决方法是为父级元素添加position:relative和适当的z-index。此外，文章还分享了使li内span内容居中和a标签内容与li样式水平对齐的技巧。" 132656342,8753399,JavaScript实现Gale-Shapley匹配算法,"['javascript', '算法', '开发语言']

摘要由CSDN通过智能技术生成

利用 UL ,LI ,DIV 下拉菜单布局要点：

<li>

<A class=highlight>服务</A>
<DIV class=HiddenMenu>
<UL class=subMenu>
<LI><A href="Services.aspx">标准化服务</A>
<LI><A href="Services.aspx">个性化服务</A>
<LI><A href="Services.aspx">定制服务</A>
<LI><A href="Services.aspx">免费试用</A>
<LI><A href="Services.aspx">自助申请定位</A>
<LI><A href="Services.aspx">自助选校</A> </LI></UL></DIV>

</li>

Css 样式设置：

parentMenu的 position:relative

HiddenMenu: position:absolute ,left:0; top:100%

这样就可以做出纯CSS下拉菜单了，而且跨浏览器的哦

补充：