這一教材最主要是實現一個簡單的水平菜單。這個菜單可以隨著浏覽器窗口寬度的變化而改變排列方式。當浏覽器寬度不足以容納所有菜單項的時候，會自動折行。
代碼如下：
<html>
<head><title>何問起</title><base target="_blank" /></head>
<body>
<style>#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#menu a,#menu a:visited {
display:block;
float:left;
color:#000;
text-decoration:none;
padding:5px;
margin:5px;
border-top:8px solid #9ab;
border-bottom:8px solid #9ab;
white-space:nowrap;
}
#menu a:hover{
color:#F00;
border-bottom:solid 8px #000;
border-top:solid 8px #000;
}
</style>
<div id="menu">
<a href="http://hovertree.com/">Home</a>
<a href="http://hovertree.com/tiku/">Contact Us</a>
<a href="http://hovertree.com/texiao/">Web Dev</a>
<a href="http://run.hovertree.com/">Web Design</a>
<a href="http://hovertree.com/map/">Map</a>
<a href="http://tool.hovertree.com/">工具</a>
<a href="http://hovertree.com/h/bjaf/u9bobx8n.htm">原文</a>
</div>
</body>
</html>
效果：
Home
Contact Us
Web Dev
Web Design
Map
工具
原文