php水平导航菜单,css实现垂直导航栏和水平导航栏的代码

本篇文章给大家带来的内容是关于css实现垂直导航栏和水平导航栏的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

垂直导航栏的样式

自学教程(如约智惠.com)

ul {

list-style-type:none;

margin:0;

padding:0;

}

a:link, a:visited {

display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;

}

a:hover, a:active {

background-color:#7A991A;

}

• 主页
• 新闻
• 联系
• 关于

水平导航栏的样式

自学教程(如约智惠.com)

ul {

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li {

float:left;

}

a:link, a:visited {

display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;

}

a:hover, a:active {

background-color:#7A991A;

}

• 主页
• 新闻
• 联系
• 关于

相关推荐：