Wat het menu doet is duidelijk als je er even met jouw muis overheen gaat. Om de procedure op jouw website te laten werken moet je de onderstaande html-code in de body-sectie van jouw pagina plaatsen, en de stylesheet in de head. Je hebt ook nog twee kleine graphics nodig die als achtergrond gebruikt worden. Dat zijn: pro-line.gif en line-pro.gif. De procedure valideert overigens geheel op HTML5.
<div class="pro-line-menu">
<ul class="pro_line">
<li><a href="/manuals/css/pro-line-menu.html"><b>menu</b></a></li>
<li><a href="/manuals/css/pro-line-menu.html"><b>crossbrowser</b></a></li>
<li><a href="/manuals/css/pro-line-menu.html"><b>website</b></a>
<ul class="sub">
<li><a href="/manuals/css/pro-line-menu.html">code</a></li>
<li><a href="/manuals/css/pro-line-menu.html">menu</a></li>
<li><a href="/manuals/css/pro-line-menu.html">pro menu</a></li>
<li><a href="/manuals/css/pro-line-menu.html">pro line</a></li>
</ul>
</li>
<li><a href="/manuals/css/pro-line-menu.html"><b>foutloos</b></a>
<ul class="sub rt">
<li><a href="/manuals/css/pro-line-menu.html">support</a></li>
<li><a href="/manuals/css/pro-line-menu.html">validate</a></li>
<li><a href="/manuals/css/pro-line-menu.html">perfect</a></li>
<li><a href="/manuals/css/pro-line-menu.html">line menu</a></li>
<li><a href="/manuals/css/pro-line-menu.html">pro menu</a></li>
</ul>
</li>
<li><a href="/manuals/css/pro-line-menu.html"><b>server</b></a></li>
<li><a href="/manuals/css/pro-line-menu.html"><b>kompoos</b></a></li>
</ul>
</div>
<style type="text/css">
.pro-line-menu{
height:36px;
width:800px;
background:url('line-pro.gif');
position:relative;
z-index:2;
margin-bottom:40px}
.pro-line-menu .pro_line{
margin:0;
padding:0;
list-style:none;
white-space:nowrap}
.pro-line-menu li{
float:left;
background:url('pro-line.gif')}
.pro-line-menu .pro_line a{
display:block;
height:36px;
float:left;
background: url('line-pro.gif');
text-decoration:none;
line-height:25px;
white-space:nowrap;
color:#efefdf;
padding:0 0 0 15px}
.pro-line-menu .pro_line a b{
display:block;
background:url('line-pro.gif') right top;
padding:0 30px 10px 15px}
.pro-line-menu .pro_line a:hover,.pro-line-menu .pro_line li:hover a{
background:url('pro-line.gif');
line-height:27px;
cursor:pointer;
color:#fff;
padding:0 0 0 15px}
.pro-line-menu .pro_line a:hover b,.pro-line-menu .pro_line li:hover a b{
display:block;
background:url('pro-line.gif') right top;
cursor:pointer;
padding:0 30px 9px 15px}
.pro-line-menu .sub{
display:none}
.pro-line-menu ul ul{
display:none}
.pro-line-menu .sub{
margin:0;
padding:0;
list-style:none}
.pro-line-menu .sub li{
background:transparent}
.pro-line-menu .pro_line :hover .sub{
height:25px;
display:block;
position:absolute;
float:left;
width:800px;
top:28px;
left:1px;
text-align:center;
background:transparent;
border:solid #808080;
border-width:2px 0}
.pro-line-menu .pro_line :hover .rt li{
float:right}
.pro-line-menu .pro_line :hover .sub li a{
display:block;
height:25px;
line-height:22px;
float:left;
background:transparent;
padding:0 16px;
margin:0;
white-space:nowrap;
color:#808080}
.pro-line-menu .pro_line :hover .sub li:hover > a{
color:#000}
</style>