De achtergrond van het menu staat nu ingesteld op #05c. Je kan elke kleur kiezen die je wilt natuurlijk. Het lettertype en de verdere eigenschappen kan je ook naar eigen goed-dunken aanpassen. Plaats de stylesheet in de head van de pagina en de html-code in de body-sectie. In de stylesheet staat een image/png;base64. De data is over een paar regels verdeeld. Zorg er voor dat de data op één regel (achter-elkaar) komt te staan. Ik heb een paar "vensters" alvast voorbereid. Je kan ze kopiëren van de volgende locaties: pro-menu-01.png, pro-menu-02.png, pro-menu-03.png, pro-menu-04.png, pro-menu-05.png, pro-menu-06.png, pro-menu-07.png en pro-menu-08.png. Je kan natuurlijk je eigen versies maken als je dat wilt. Verwijs in de stylesheet naar de juiste graphic (verwijst momenteel naar "pro-menu-08.png"). De procedure werkt multi-browser en is valide voor W3C.
<style type="text/css">
.pro{
background:#05c;
color:#fff;
display:block;
width:100%}
.pro-menu{
margin:0;
height:35px;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
AAEAAAAjCAYAAABVcWC0AAAAPklEQVQImZ3MwQkAIAwDwJDBulPHdJFO0TZ+BEXw4+cI
gQTuPmhmYESAVQVKWnT36jaZeaYn12yfSgIBfDAB/0tEHJ9QvC0AAAAASUVORK5CYII=');
list-style-type:none;
padding:0 0 0 1em}
.pro-menu li{
float:left}
.pro-menu li a{
display:block;
float:left;
height:35px;
line-height:35px;
color:#fff;
text-decoration:none;
text-align:center;
padding:0 0 0 15px;
cursor:pointer}
.pro-menu li a b{
float:left;
display:block;
padding:0 28px 0 14px}
.pro-menu li a:hover{
background-image:url('pro-menu-08.png'); }
.pro-menu li a:hover b{
background:url('pro-menu-08.png') no-repeat right top; }
</style>
<div class="pro">
<ul class="pro-menu">
<li><a href="/manuals/css/pro-menu.html"><b>professioneel</b></a></li>
<li><a href="/manuals/css/pro-menu.html"><b>menu</b></a></li>
<li><a href="/manuals/css/pro-menu.html"><b>valide</b></a></li>
<li><a href="/manuals/css/pro-menu.html"><b>crossbrowser</b></a></li>
<li><a href="/manuals/css/pro-menu.html"><b>css</b></a></li>
<li><a href="/manuals/css/pro-menu.html"><b>colofon</b></a></li>
</ul>
</div>