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

html-css011

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

CSS中如何设置div的宽度?

我们在CSS布局中常常对指定DIV设置一定宽度，这里DIVCSS5为大家介绍两种设置DIV宽度(width)的方法。

一、外部CSS样式设置DIV宽度 - TOP

首先我们新建命名一个CLASS www.hbbz08.com 或ID的类，这里CSS命名为“.divcss5”，以class引用。并且设置宽度为300px，CSS选择器代码如下：

.divcss5{width:300px}

/* css 注释：这样设置了对象divcss5宽度为300px样式 */

针对DIV使用代码：

<divclass="divcss5">我宽度设置为300px</div>

宽度设置截图：

外部CSS宽度设置案例截图查看大图

外部CSS宽度设置案例截图

二、div标签内设置CSS宽度样式 - TOP

假如这里也是对DIV标签设置css width为300px,div标签内设置CSS样式，我们就需要style属性值。

直接得到HTML代码片段：

<divstyle="width:300px">我宽度设置为300px</div>

标签内设置宽度样式截图：

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

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

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

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