你会利用css写下拉列表框吗？

　　看到网上各个网站有各色各样的下拉列表框，你是否有想过自己去做一个出来呢？出于好奇与自强心，我研究了一个下午，发现网上很多的下拉列表框都是利用javascript或者是jquery（其实jquery和javascript本质是一样的）动态的画出来的，而页面本身其实不存在这个列表框的元素。但是经过大量的查询，最后还是基本可以做出一个利用纯的css编写出一个下拉列表框，在这里报着和博客园的朋友分享的态度，写了这篇文章。如果有什么不对，请指正。

　　首先我们在body中创建一个我们的菜单和子菜单。利用的元素为ul 和 li。

　　代码如下：

<ul id="menu">
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">子菜单一</a></li>
                <li><a href="#">子菜单二</a></li>
                <li><a href="#">子菜单三</a></li>
                <li><a href="#">子菜单四</a></li>
                <li><a href="#">子菜单五</a></li>
            </ul>
        </li>
        <li><a href="#">菜单二</a>
            <ul>
                <li><a href="#">子菜单一</a></li>
                <li><a href="#">子菜单二</a></li>
                <li><a href="#">子菜单三</a></li>
                <li><a href="#">子菜单四</a></li>
                <li><a href="#">子菜单五</a></li>
            </ul>
        </li>
        <li><a href="#">菜单三</a>
            <ul>
                <li><a href="#">子菜单一</a></li>
                <li><a href="#">子菜单二</a></li>
                <li><a href="#">子菜单三</a></li>
                <li><a href="#">子菜单四</a></li>
                <li><a href="#">子菜单五</a></li>
            </ul>
        </li>
        <li><a href="#">菜单四</a>
            <ul>
                <li><a href="#">子菜单一</a></li>
                <li><a href="#">子菜单二</a></li>
                <li><a href="#">子菜单三</a></li>
                <li><a href="#">子菜单四</a></li>
                <li><a href="#">子菜单五</a></li>
            </ul>
        </li>
        <li><a href="#">菜单五</a>
            <ul>
                <li><a href="#">子菜单一</a></li>
                <li><a href="#">子菜单二</a></li>
                <li><a href="#">子菜单三</a></li>
                <li><a href="#">子菜单四</a></li>
                <li><a href="#">子菜单五</a></li>
            </ul>
        </li>
    </ul>

　　　部分效果图如下：

　　这个是我们的粗粗的下拉列表框，你可能会说，这个和我们的平时见到的下拉列表框不太一样呀，而且li元素前面那些点。请看我慢慢把它装饰成完美的“作品”……

接着我们按照习惯，创建一个两个css样式表，一个叫main.css 另一个叫menu.css，然后都放在同一个styles的文件夹下：如图：

　　这样做的目的是为了方便我们吧css代码模块化，为以后的维护做好良好的基础。接着我们要吧这两个css文件盒.html文件连起来了。首先在head目录下创建一个<link>标签把需要的main.css文件找到。

　　代码如下：　　

<link rel="stylesheet" href="styles/main.css" type="text/css" />

　　接着在main.css文件中加入一个引向menu.css的文件就可以了。需要添加的代码如下：

@import url('menu.css');

　　大概的拓扑图如上。

 

　　好了现在index.html文件和main.css文件都写好了，只需要写menu文件下的内容就可以了。

　　首先我们创建一块宽度为800px的矩形，然后让这个矩形居中。

　　代码如下：　

*{
        margin:0px;
        padding:0px;
        word-wrap:break-word;
        word-break:break-all;    
    }
    
    html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/
    
    #menu{
        margin:0px auto;
        width:800px;    
    }/*是整个menu页面处于中间的水平*/

　　接着我们写核心的css脚本代码了，首先让menu菜单紧靠边框，然后设置菜单栏的长度和宽度，并向左飘并设置字体的大小，并设置显示方式为线性的。

其中display：inline在w3shool解释为：默认。此元素会被显示为内联元素，元素前后没有换行符。代码如下：

ul{
        margin:0px;
        padding:0px;
    }
    
    /*使菜单紧密的排成一条线并去除li前面的点*/
    ul li{
        float:left;
        display:inline;
        font:1em Arial, Helvetica, sans-serif;
        height:30px;
        width:100px;
        list-style:none;
    }

　　接着我们设置菜单的内容，设置字体的内容为白色，然后去掉超链接的下划线，设置行高，并设置长度和宽度等等代码如下：

ul li a{
        color:#fff;
        text-decoration:none;
        line-height:29px;
        width:91px;
        height:29px;
        margin:0px;
        padding:0px 0px 0px 8px;
        display:block;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        background:#83cf33;
    }

　　菜单外框写好了，接着我们写子菜单的外框了。设置子菜单的外框的高度和宽度：

　　代码如下：　　

ul li ul li{
        height:25px;
        width:100px;    
}

　　设置子菜单中超链接的文字的背景和行高。

　　代码如下：

ul li ul li a{
        background:#b2da7e;
        line-height:24px;    /*设置行间的距离*/
}
    

　　写到这里基本框架做出来额，看效果图：

　　接着我们的任务就是吧这些菜单写动起来。利用的hover这个伪元素。当我们鼠标在菜单框中时，我们希望设置一下这个菜单项高亮显示，那就把颜色改得鲜明点，代码如下：　

ul li a:hover{
        background:#94ea10;
}

　　同理我们写一下子菜单的高亮显示的代码：

ul li ul li a:hover{
        background:#a5d561;            
}

　　接着我们要开始让他动起来的真正代码了，思路是这样的，我们把子菜单隐藏起来，然后设置当我们的鼠标在菜单上面的时候，我们吧隐藏起来的内容显示出来。这里还是利用了hover这个伪元素的特点。代码如下：

ul li ul{
    visibility:hidden;
}
    
    /*当鼠标在菜单上得时候显示子菜单*/
ul li:hover ul{
    visibility:visible;    
}

　　好了我们的纯的css下拉列表框，写好了。你可能说为什么不用javascript来写呢，其实利用javascript写也没有问题，但是稍微懂点seo的技术人员知道，在javascript中创建的任何元素，这些搜索引擎都是爬不到的；当然我们从另一个角度可以说，既然知道了一种方法，为什么不去在找一种方法呢？本人亲测IE8、IE9、火狐6.0.2、谷歌浏览器17.0.963.56 m完全兼容。

　　读到这里你是否可以自己做出一个用纯的css脚本写出一个下拉列表框呢？

　　最好附上menu.css文件的完整的代码和效果图：

*{
        margin:0px;
        padding:0px;
        word-wrap:break-word;
        word-break:break-all;    
    }
    
    html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/
    
    #menu{
        margin:0px auto;
        width:800px;    
    }/*是整个menu页面处于中间的水平*/
    
    /*============================================================*/
    /*下面是核心的代码*/
    /*使菜单栏靠进左边*/
    ul{
        margin:0px;
        padding:0px;
    }
    
    /*使菜单紧密的排成一条线并去除li前面的点*/
    ul li{
        float:left;
        display:inline;
        font:1em Arial, Helvetica, sans-serif;
        height:30px;
        width:100px;
        list-style:none;
    }
    
    /*去除超链接的下划线 块状的形式存在*/
    ul li a{
        color:#fff;
        text-decoration:none;
        line-height:29px;
        width:91px;
        height:29px;
        margin:0px;
        padding:0px 0px 0px 8px;
        display:block;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        background:#83cf33;
    }
    
    /*设置子菜单的长宽*/
    ul li ul li{
        height:25px;
        width:100px;    
    }
    
    /*设置子菜单下超链接的背景色*/
    ul li ul li a{
        background:#b2da7e;
        line-height:24px;    /*设置行间的距离*/
    }
    
    /*设置超链接的背景色*/
    ul li a:hover{
        background:#94ea10;
    }
    
    /*吧子菜单隐藏起来*/
    ul li ul{
        visibility:hidden;
    }
    
    /*当鼠标在菜单上得时候显示子菜单*/
    ul li:hover ul{
        visibility:visible;    
    }
    
    /*显示子菜单的超链接*/
    ul li ul li a:hover{
        background:#a5d561;            
    }