php制作二级导航栏,PHP开发 导航栏二级下拉菜单CSS样式

我们上一章节已经把我们相应的HTML元素加上了class选择器，现在我们把这些class加上我们的css样式，代码如下

li{

list-style-type:none;

}

#menu {

width:950px;

margin:30px auto 0px;

height:45px;

background-color: #030e11;

}

#menu li {

float:left;

width:109px;

line-height:39px;

text-align:center;

position:relative;

border:none;

}

#menu li a {

font-size:16px; color: #e6f8e9;

display:block;

outline:0;

text-decoration:none; }

#menu li:hover a {

color: #ff0000;           /*导航栏文字颜色 */

}

#menu li:hover .dropdown_1column {

left:0px;

top:38px;

}

.dropdown_1column{                /* 下拉菜单边框颜色*/

margin:0px auto;

float:left;

position:absolute;

left:-999em;

text-align:left;

border:1px solid #066591;

border-top:none;

background:#F4F4F4;

width: 140px;

}

#menu li:hover div a {    /* 下拉菜单文字颜色*/

font-size:12px

;color:#444;

}

#menu li:hover div a:hover{color:#21910e;}   /*下拉菜单鼠标停留颜色*/

#menu li ul {

list-style:none;padding:10px 5px;

margin:0;

}

#menu li ul li {

font-size:12px;

line-height:26px;

position:relative;

padding:0;margin:0;

float:none;

text-align:left;

width:130px;

}

#menu li ul li:hover {

background:none;

border:none;padding:0;

margin:0;

}

我们只需要将这些css样式加到页面中就可以实现我们想要的效果了

你可以把这些css样式单独放到css文件中，再在HTML页面中引用一下即可

也可把它直接放到HTML页面 ‘head’里面，本教程是放在了同一个页面

看下一章节完整代码