Az első példában:
- Beállítjuk menülista felső szintjén található link elemek tulajdonságait.
A második példában:
- Beállítjuk menülista középső szintjén található link elemek tulajdonságait.
A harmadik példában:
- Beállítjuk menülista alsó szintjén található link elemek tulajdonságait.
1. példa:
Forráskód
<style type="text/css">
.....
#balmenu > ul > li > a:link,
#balmenu > ul > li > a:visited {
background-color:#662210; color:#ffddcc;
font: italic 14px/38px Verdana, Geneva, sans-serif;}
#balmenu > ul > li > a:hover{
font:15px/38px Verdana, Geneva, sans-serif;
color:#ffffff; }
#balmenu > ul > li > a:active {
color:#ffffff;
font-size:13px; border-bottom:2px;
border-top:2px; padding-bottom:4px;}
</style>
...
Eredmény*
2. példa:
Forráskód
<style type="text/css">
.....
#balmenu > ul > li > ul > li > a {
display: block;
background-color:#662210;
width: 110px;
height: 24px; border-radius: 1px 5px 5px 1px;
text-align:right; padding-right:10px; padding-bottom:2px;
border-right:1px solid #ccbbaa; border-bottom:1px solid #ffaaaa;
border-top:1px solid #bb8866;
box-shadow: 3px 3px 5px 0px #441108; }
#balmenu > ul > li > ul > li > a:link,
#balmenu > ul > li > ul > li > a:visited {
background-color:#ffddcc; color:#662210; text-decoration:none;
font-size:14px;}
#balmenu ul > li > ul > li > a:hover {
background-color:#ffffff; color:#441106;
padding-right:12px; padding-left:2px;}
#balmenu ul > li > ul > li > a:active {
background-color:#ffddcc; color:#441106; font-size:13px;
border-bottom:2px; border-top:2px; padding-bottom:4px;}
</style>
...
Eredmény*
3. példa:
Forráskód
<style type="text/css">
....
#balmenu > ul > li > ul > li > ul > li > a{
display: block;
background-color:#662210;
width: 110px;
height: 24px;
border-radius: 1px 5px 5px 1px;
text-align:right; padding-right:2px; padding-bottom:2px;
border-right:1px solid #ccbbaa;
border-bottom:1px solid #ffaaaa; border-top:1px solid #bb8866;
box-shadow: 3px 3px 5px 0px #441108;}
#balmenu > ul > li > ul > li > ul > li > a:link,
#balmenu > ul > li > ul > li > ul > li > a:visited {
background-color:#ffddcc; color:#662210; text-decoration:none;
font-size:13px; font-style: italic;}
#balmenu ul > li > ul > li > ul > li > a:hover {
background-color:#ffffff; color:#441106;
padding-right:4px; padding-left:2px;}
#balmenu ul > li > ul > li > ul > li > a:active {
background-color:#ffddcc; color:#441106; font-size:13px;
border-bottom:2px; border-top:2px; padding-bottom:4px;}
</style>
...
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_fmenu_1_OK.html