CSS設定菜單的橫豎轉換
導覽列不僅僅可以是豎直排列，還可以在水準方向上顯示，通過CSS可以實作導覽列的橫豎轉換。
首先，建立HTML結構，菜單的各個項目清單使用<ul>表示，設定頁面的背景顔色，接着設定項目清單<ul>的屬性，将項目符号設定不顯示，在<div>标記中設定字型。
<span style="font-size:24px;"><html>
<head>
<title>
菜單的橫豎轉換
</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation{
font-family:Arial;
}
#navigationul{
list-style-type:none;
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<divid="navigation">
<ul>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Home</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >My Blog</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Friends</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Next Station</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Contact Me</a></li>
</ul>
</div>
</body>
</html></span>
此時，是普通的項目清單，僅僅是取消了其中的項目符号。
設定<li>的float屬性，使各個項目都水準顯示，并且設定<a>的相關屬性，代碼如下：
<span style="font-size:24px;">#navigation li{
float:left;
}
#navigationli a{
display:block;
padding:3px6px 3px 6px;
text-decotation:none;
border:1pxsolid #711515;
margin:2px;
}</span>
此時，通過設定<li>的浮動屬性float之後，項目清單按水準方向排列到了一起。
最後，設定超連結<a>的僞類别屬性，實作動态的菜單效果。
<span style="font-size:24px;"><html>
<head>
<title>
菜單的橫豎轉換
</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation{
font-family:Arial;
}
#navigationul{
list-style-type:none;
margin:0px;
padding:0px;
}
#navigationli{
float:left;
}
#navigationli a{
display:block;
padding:3px6px 3px 6px;
text-decotation:none;
border:1pxsolid #711515;
margin:2px;
}
#navigationli a:link,#anvigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigationli a:hover{
background-color:#990020;
color:#ffff00;
}
-->
</style>
</head>
<body>
<divid="navigation">
<ul>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Home</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >My Blog</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Friends</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Next Station</a></li>
<li><ahref="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Contact Me</a></li>
</ul>
</div>
</body>
</html></span>
注意，當沒有設定<ul>标記，或者<ol>标記的寬度width屬性時，當浏覽器的寬度縮小，菜單會自動的換行，這是采用<table>标記制作菜單無法實作的，經常被加以靈活應用。