Az előző oldalon megismert menü menüsorrá alakítható, ha a listaelemeket inline elemmé alakítjuk a li {display:inline;} stílusdeklarációval.
Annak érdekében, hogy a menüpontok egymás mellé kerülhessenek a fenti stílusdeklarációt ki kell egészíteni a következővel: li {display:inline; }
Példa:
Az előző oldalon látható példa átalakítása
Forráskód
<style>
ul {list-style-type: none; }
nav {background-color:#e0e0e0;
text-align:center;
padding: 5px 5px 5px 0;
width:585px; height:55px; }
nav li {padding:1px; margin:0; display:inline; float:left;}
nav ul {padding:1px; margin:0;}
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;}
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>
<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*
* 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_menusorban_v_01.html