A link elemet a menüben inline-block elemként formázzuk. Ízlés szerint kap szegélyt és árnyékot.
A 2. példánál a link elem egyes állapotainak megkülönböztetéséről gondoskodunk.
1. Példa:
Forráskód
...<style type="text/css">
/* A link elem csinosítása */
#menu li a { display: inline-block; background-color:#662210;
width: 110px; height: 24px; border-radius: 1px 1px 15px 1px;
text-align:center; border-right:1px solid #ccbbaa;
border-bottom:1px solid #ffaaaa; border-top:1px solid #bb8866;
box-shadow: 3px 3px 5px 0px #441108;}
</style> ....
<body>
...
</body>
Eredmény*
2. Példa:
Forráskód
...<style type="text/css">
/* A link felírat csinosítása */
#menu li a:link, #menu li a:visited {color:#ffddcc;
font: 14px/24px Verdana, Geneva, sans-serif;
text-decoration:none; }
/* A link állapotainak megkülönböztetése */
#menu li a:hover {color:#ffeedd; background-color:#883218;
text-decoration:none;}
#menu li a:active {color:#ffeedd; background-color:#883218;
border-bottom:2px; border-top:2px; padding-top:1px; font-size:13px; }
</style> ....
<body>
....
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_menu_5.html