css下拉菜单 有几点不懂,望高手能帮忙解决一下

html-css014

css下拉菜单 有几点不懂,望高手能帮忙解决一下,第1张

1,一般下拉菜单的二级菜单都是绝对定位的,绝对定位的元素脱离了常规流,所以不占位,他们会叠加在其他元素的上面或者下面

2,你可以把这里面的空格当作[内],也就是子孙元素的意思

#menu ul li ---- #menu 内的 ul 内的 li

#menu ul li:first-child a:hover:after ---- #menu 内的 ul 内的 li(并且是ul的第一个子元素) 内的 a 鼠标指向时 after

after/before 的意义在于,他们不存在在html文档中,但是又能被浏览器显示出来,因此,可以用来实现一些效果。

常用的例如:

~文字前面的icon,不用在html中插入多余的空元素,直接使用after或者before,前面后面随便插.......

~清除浮动

~为引用的文字加入引号

~画一些有意思的图标

当我看到“请自己写出来”这句话的时候,就感觉很奇怪,你是来出考题的呢?还是来寻求问题的解答呢?不过还是为了解答的原则,这题还是为你解答,先看效果图:

这里做的方式有好多种,你可以用select做,也可以用模拟的方式去做,圆角的代码是:

border-radius:10px

隔行换色的代码:

$(".txt_list li:odd").css("background","#ccc")

$(".txt_list li:even").css("background","#fff")