/*二级菜单样式*/ .show_menu{ display: none; position: absolute; z-index:4; /*设置悬浮效果*/ top: 42px; left: 318px; border: 1px solid #ccc; width: 715px; background: #fff; } /*添加背景颜色为了遮住红色边框颜色*/ .left_div { width: 495px; float: left; margin: 0 5px; } .right_div { width: 200px; float: left; margin: 0 5px; } /*二级菜单内部样式*/ .left_div dl { border-bottom: 1px solid #eeeeee; padding-bottom: 2px; overflow: hidden; margin-top: 2px; } /*overflow是防止字数过多超出*/ .left_div dl dt { display: block; width: 60px; float: left; text-align: right; height: 22px; line-height: 22px; padding-right: 8px; } .left_div dl dt a { color: #E4393C; font-weight:bold; text-decoration: underline; } .left_div dl dd { display: block; overflow: hidden; } .left_div dl dd a{ display: block; float: left; border-left: 1px solid #cccccc; /*a不是块级元素*/ color: #737373; padding: 0px 8px; height: 14px; /*行高和前面不一样是为了解决后面的多行问题*/ line-height: 14px; margin: 6px 0; /*通过调节内外边距来对齐*/ } .right_div dl { margin-top: 6px; } .right_div dl dd a:hover{ color: #313131; font-weight:normal; text-decoration: none; } 总结: 1,左右分区,dl,dt,dd利用浮动来达到一行显示 2,竖线用边框实现 3,其他一些基本的样式设置
电商网站分类导航效果--CSS实现(二) 二级菜单
最新推荐文章于 2021-12-21 09:14:36 发布