This article describes the pure CSS implementation of the blue fillet effect horizontal navigation menu code. Share to everyone for your reference. Specifically as follows:
This is a lovely blue rounded horizontal navigation menu, with a few background pictures, I think this menu is very practical, especially in the personal blog is very appropriate. The compatibility is also very good, almost compatible with all browsers.
The screenshot of the running effect is as follows:
The
code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>
<title> Blue Fillet horizontal navigation menu </title>
<style>
*{
margin:0;
padding:0;
}
body{
background: #fff;
color: #666;
font:12px/18px Tahoma, Arial, Helvetica, Sans-serif;
}
#menu {
width:100%;
margin:15px;
}
#menu ul{
List-style:none;
}
#menu li{
List-style:none;
Display:block;
Float:left;
margin:0 2px;
}
#menu Li a{
Display:block;
Float:left;
height:66px;
color: #fff;
text-transform:uppercase;
font-size:11px;
Font-weight:bold;
Background:url (images/menu_009_l.jpg) no-repeat left;
line-height:66px;
padding:0 0 0 9px;
Text-decoration:none;
}
#menu Li a span{
Display:block;
Float:left;
Background:url (images/menu_009_r.jpg) No-repeat right;
height:66px;
color: #d2eeff;
line-height:66px;
padding:0 18px 0 8px;
}
#menu Li a:hover{
Display:block;
Float:left;
Background:url (images/menu_009_h_l.jpg) no-repeat left;
height:66px;
}
#menu li A:hover span{
Display:block;
Float:left;
Background:url (images/menu_009_h_r.jpg) No-repeat right;
color: #fff;
height:66px;
}
#menu Li a.current{
Display:block;
Float:left;
height:66px;
color: #fff;
text-transform:uppercase;
font-size:11px;
Font-weight:bold;
Background:url (images/menu_009_h_l.jpg) no-repeat left;
line-height:66px;
padding:0 0 0 9px;
Text-decoration:none;
}
#menu Li A.current span{
Display:block;
Float:left;
Background:url (images/menu_009_h_r.jpg) No-repeat right;
height:66px;
color: #fff;
line-height:66px;
padding:0 18px 0 8px;
}
</style>
</head>
<body>
<div id= "menu" >
<ul>
<li><a href= "#" class= "current" ><span> home </span></a></li>
<li><a href= "#" ><span> boutique script download </span></a></li>
<li><a href= "#" ><span> page templates </span></a></li>
</ul>
</div>
</body>
</html>
I hope this article will help you with the DIV+CSS web design.
