css导航栏、css菜单栏(侧边栏)的小技巧，夺人眼球，超级简单；

**

css侧边、导航菜单栏设计小技巧

**

1.为了制作更美观、简洁的菜单栏，主要用到的知识点有：

• border-radius : 0 0 1px #999; < 设置菜单栏的圆角边框 >
• overflow : hidden ; < 对设置圆角边框溢出的部分进行隐藏 >
• background : < 背景颜色和背景图像同时存在时的应用 >
• hover : < 鼠标hover时候的背景变幻 >

注意: 这里采用的是css内联样式，background的路径设置和css外联式存在一定区别，应细心区分；

2.查看Demo效果:

3.Html代码如下:

<div class="news_type_list">
        	<h2>新闻速递</h2>
            <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>
    </div>

4.css代码如下:

	*{
		margin:0;
		padding:0;
	}

	.news_type_list
	{
		margin:50px auto;
		width:200px;
		height:auto;
		background:#FFF;
		box-shadow:0 0 1px #999;
		border-radius:5px;
		overflow:hidden;
	}

	.news_type_list ul{
		width:100%;
		height:auto;
	}

	.news_type_list h2
	{
		padding-left:20px;
		height:35px;
		line-height:35px;
		font-size:16px;
		font-weight:600;
		color:#400000;
		background:url(mf-pattern/img/mF_taobaomall/btn-bg2.gif)repeat-x;
	}

	.news_type_list li
	{
		list-style-type:none;
		padding-bottom:5px;
	}

	.news_type_list li a
	{
		color:#280029;
		background:url(mf-pattern/img/mF_kiki/ar-left.gif) no-repeat left center;
		padding:5px 15px;
		font-size:13px;
		text-decoration:none;
		margin-left:10px;
		display:block;
	}

	.news_type_list a:hover
	{
		background:url(mf-pattern/img/mF_kiki/ar-right.gif) no-repeat left center;
		color:green;
		background-color:#FFFBF0;
	}

如遇错误的地方，还请指正。