用css如何实现二级菜单的显示

html-css012

用css如何实现二级菜单的显示,第1张

最简单的就是利用CSS层级关系进行编写

比如：

<ul class="main_menu">

    <li>

        <span>主菜单</span>

    </li>

    <li>

        <span>主菜单二</span>

        <ul class="sub_menu">

            <li>三级菜单</li>

            <li>三级菜单二</li>

        </ul>

    </li>

</ul>

CSS部分可以这样写：

<style>

ul.sub_menu {display:none}   // 先让二给菜单隐藏

ul.main_menu>li:hover ul.sub_menu {display:block}  //当鼠标划过第一级主菜单的li标签时，当前子级的二级ul就显示出来。

//其它的你自己再美化，主要告诉你方式

</style>

1,给二级菜单添加个样式, 二级菜单:hover 一级菜单{xx样式xxxxx}

2,二级菜单中线对齐是布局问题,用margin调试

3,你不设置二级菜单的宽度,他就会自适应了吗,修改二级菜单宽度可以用padding

4,CSS判断不了,你可以用JS 或者用绝对定位定死最右一列

正常都是a用伪类选择器比如a:hover ｛｝

你上面的代码，单独用css实现下来菜单，尽管避免了用js~但并不可取，兼容性有问题，你试过其他浏览器了吗？都可以正常显示吗

建议你用js或jq实现，也是比较简单的，另外第一项的背景，看你的代码并没涉及到第一项，可能受其他css的影响，比如，红色的样式，上面的代码中并没找到~