Examples of graphic and text creation of navigation menu for ul

首先上图，最终效果：

HTML代码：

 

• Menu


• Menu Menu


• Menu


• Menu Menu Menu


• Menu Menu

 

CSS代码：

 

#qwe{
width: 200px;
font-family: "微软雅黑";
margin: 50px;
}
#qwe ul{
list-style-type: none;
padding: 0;
}
#qwe ul li a{
text-decoration: none;
display: block;
width: 200px;
height: 25px;
border-left: 10px solid #333333;
border-right: 1px solid #666666;
border-bottom: 1px solid #555555;
padding-left: 3px;
margin-bottom: 1px;
}
#qwe ul li a:link,#qwe ul li a:visited{
color: crimson;
background-color: #999999;
}
#qwe ul li a:hover{
color: green;
background-color: #777777;
}
#qwe ul li a:active{
color: darkorange;
}

 

备注：其中包含伪类的设置

 

The above is the detailed content of Examples of graphic and text creation of navigation menu for ul. For more information, please follow other related articles on the PHP Chinese website!