制作一个网站的导航菜单

啊哈！从今天起我要做一个勤奋好学的孩纸。现代社会是一个信息爆炸的社会，无论什么更新换代的都很快，我希望自己在2年后可以做到行业里的一把好手，那么学习就是必不可少的啦！学到老活到老~~

我打算在闲暇时间做一个农产品营销系统，之前bulabula一堆构思准备，现在我先要开始做界面啦！今儿个一会儿还有事，先做个导航菜单栏吧！希望大家不要笑话哈！

我打算实现下图的效果~~

那这个结构类似于书籍目录，我们用HTML的无序列表去构建菜单，结构如下：

<ul>
<li><a href="#">首页</a></li>
<li><a href="#">蔬菜</a></li>
<li><a href="#">水果</a></li>
<li><a href="#">粮油</a></li>
<li><a href="#">畜禽养殖</a></li>
<li><a href="#">种子农资</a></li>
<li><a href="#">其他农副</a></li>
</ul>

嗯，看起来和我们看到的网站上的导航栏是不同的，太过于简单了，还有那个小圆点在很不舒服。所以底下我会用到CSS样式去美化规整我的导航栏，代码如下：

<style>
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;width:100px;}
a{text-decoration:none;display:block;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:20px;}
a:hover{background-color:#f60;clor:#fff;}
</style>

加入样式之后的效果是这样的：

当鼠标划过的时候对应的块儿区会变成橙色哦！