css一级导航文字不显示怎么回事

html-css020

css一级导航文字不显示怎么回事,第1张

网页与css本身就是分离的。css的作用是来规范的描述网页如何显示，显示成什么样子。所以说网页中的文字是不会显示到css中的。css中写的全是，样式属性来规范网页显示的。之所以引入css到网页，就是为了html代码与布局样式尽量的分离，为网站改版提供了大大的方便。

一、二级菜单不下来原因有以下方面：

1、HTML代码各层级嵌套错误；

2、CSS样式控制中没有使用定位属性；

3、定位数值计算错误；

二、正确的解决方案

1、清晰的HTML代码层级，如下：

<ul class="menu">

    <li class="nav">

        <a href="#">网站首页</a>

    </li>

    <li class="nav">

        <a href="#">产品分类</a>

        <ul class="subnav">

            <li><a href="#">电脑</a></li>

            <li><a href="#">手机</a></li>

            <li><a href="#">平板</a></li>

            <li><a href="#">显示器</a></li>

        </ul>

    </li>

</ul>

2、清晰的CSS定位属性，代码如下：

<style type="text/css">

ul,li{margin:0pxpadding:0pxlist-style:none}

a{color:#ffftext-decoration:none}

.menu a{display:blockpadding:0px 30px}

.menu a:hover{background:#da2128}

.menu{float:leftwidth:60%line-height:36pxbackground:#333white-space:nowrap}

.menu .nav{float:leftposition:relativeborder-left:1px solid #FFF}

.subnav{position:absolutetop:36pxleft:0pxbackground:#666}

.subnav li{line-height:36pxborder-bottom:1px solid #fff}

</style>

3、完整的代码结构

<Doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>带二级下拉菜单展示</title>

        <style type="text/css">

        ul,li{margin:0pxpadding:0pxlist-style:none}

        a{color:#ffftext-decoration:none}

        .menu a{display:blockpadding:0px 30px}

        .menu a:hover{background:#da2128}

        .menu{float:leftwidth:60%line-height:36pxbackground:#333white-space:nowrap}

        .menu .nav{float:leftposition:relativeborder-left:1px solid #FFF}

        .subnav{position:absolutetop:36pxleft:0pxbackground:#666}

        .subnav li{line-height:36pxborder-bottom:1px solid #fff}

        </style>

    </head>

    <body>

        <ul class="menu">

            <li class="nav">

                <a href="#">网站首页</a>

            </li>

            <li class="nav">

                <a href="#">产品分类</a>

                <ul class="subnav">

                    <li><a href="#">电脑</a></li>

                    <li><a href="#">手机</a></li>

                    <li><a href="#">平板</a></li>

                    <li><a href="#">显示器</a></li>

                </ul>

            </li>

        </ul>

    </body>

</html>

4、代码展示效果截图

三、代码说明

1、HTML代码中的一级导航li定义了class="nav"，主要用于区分二级导航的li；

2、CSS代码中一级导航的样式中定义了相对定位（position:relative），不设定任何位置参数值，主要给子代码定位使用；

3、二级导航的绝对定位（position:absolute），参考对象为一级导航，因为一级导航已经将属性改为定位方式；

4、代码没有指明高度，但标明了行高，所以在二级导航定位的时候给出了top:36pxleft:0px，目的是为了控制二级导航显示在一级导航的正下方；

5、A标签默认没有宽高，为了显示鼠标经过效果，在这里特意定义了A的属性为display:block，让其能同父层级一样的宽度和高度。

四、特别提示

1、一级导航的li里面CSS一定要有相对定位，否则二级导航的绝对定位就无法控制；

2、二级导航里给出的绝对定位，是参考一级导航，所以只需要计算一级导航的高度即可；

3、一级导航的class="nav"，不能不定义，也不能给二级导航，否则就会相互影响。

给你推荐一款超好用的CSS工具条——Web Developer。

怎么个好就不给你废话了哈，我当时安装的时候，是通过firefox浏览器的【工具|附加组件】选择添加的哈，不过是英文版的，如果你不太好接受的话，可以在百度上直接输入Web Developer，就会有提供中文版下载的哈~~

（看css源码是它最基本的功能~~还可以编辑哦~~）