Az a elemek formázásával hozhatunk létre állandó szélességű és magasságú, tetszetős hátterű menüpontokat. Az li a: {display: block;} beállítás mellett.
A formázás lépései:
Kiinduló állapot:
Forráskód
<style>
nav {background-color:#e0e0e0;
padding: 5px 10px 10px 0; width: 200px;}
</style>
...
<body>
<nav>
<ul><li>
<a href="https://webfejlesztes...."> CSS3 Színek</a>
</li><li>
<a href="https://webfejlesztes...."> CSS3 Alapok</a>
</li><li>
<a href="https://webfejlesztes...."> CSS3 Kijelölők</a>
</li></ul>
</nav>
</body>
Eredmény*
A fontbeállítások:
Forráskód
<style>
Az előző plusz:
nav li a:link {color:#666600;
font: small-caps bold 18px Verdana, Geneva, sans-serif;
text-decoration:none; }
nav li a:visited {color:#666600; text-decoration:none;}
nav li a:hover {color:#006666; text-decoration:none;}
nav li a:active {color:#660000; text-decoration:none;}
</style>
...
<body>
Az előzővel egyezik.
</body>
Eredmény*
A listajelek eltüntetése:
Forráskód
<style>
Az előző plusz:
ul {list-style-type: none; }
</style>
...
<body>
Az előzővel egyezik.
</body>
Eredmény*
A linkeket blokkszintűvé alakítva:
Forráskód
<style>
Az előző plusz:
nav li a { display: block;}
nav li {padding:1px; margin:0;}
nav ul {padding:5px; margin:0;}
</style>
...
<body>
Az előzővel egyezik.
</body>
Eredmény*
A linkdoboz méretezése és szövegigazítás:
Forráskód
<style>
Az előző plusz:
nav li a { display: block;
margin: 2px; width: 160px;
height: 25px;
text-align:right;}
</style>
...
<body>
Az előzővel egyezik.
</body>
Eredmény*
A linkdoboz háterének és szegélyének beállítása:
Forráskód
<style>
Az előző plusz:
nav li a { display: block;
background-color:#FFFFFF;
margin: 2px; width: 160px;
padding: 8px 18px 8px 8px;
height: 25px; text-align:right;
border:1px solid #cccccc; }
</style>
...
<body>
Az előzővel egyezik.
</body>
Eredmény*
Szegélykerekítés és árnyékolás:
Forráskód
<style>
Az előző plusz:
nav li a { display: block;
background-color:#FFFFFF;
margin: 2px; width: 160px;
padding: 8px 18px 8px 8px;
height: 25px;
border-radius: 15px 15px 15px 15px;
text-align:right;
border:1px solid #cccccc;
box-shadow: 3px 3px 5px 0px #444444;}
</style>
...
<body>
Az előzővel egyezik.
</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ő: css_listak_menuben_v_01.html