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;
	}

如遇錯誤的地方，還請指正。