相信有不少朋友在制作網(wǎng)站時，都遇到過圓角下拉菜單這種情況，有的朋友甚至想過用CSS+JS的方法，其實不必那么麻煩，純CSS就可以完成哦，下面給大家詳細(xì)介紹網(wǎng)站制作時，如何制作出圓角的下拉菜單：
首先，準(zhǔn)備一個圓角的下拉菜單的圖片，我們隨便給圖片命名為：nav_n_li.png；
其次我們將Html布局，內(nèi)容如下：
<div class="nav">
         <ul id="jsddm">
        <li><a href="index.html">首頁</a>
                 </li>
        <li><a href="about.html">公司簡介</a>
            <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 class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
        <li><a href="english.html">產(chǎn)品中心</a>
                  <ul>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
        <li><a href="jihua.html">銷售中心</a>
                  <ul>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
            <li><a href="youxue.html">售后服務(wù)</a>
                  <ul>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
        <li><a href="buy.html">聯(lián)系我們</a>
                  <ul>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li><a href="#">子頁</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
    </ul>
</div>
以上為導(dǎo)航條的布局，我們是將nav_n_li.png圖片放在每一個下拉菜單里，給最后一個li的；
 
接下來，我們再把樣式寫出來，內(nèi)容如下：
.nav { height:45px; background:#e43b57; margin:0; padding:0;}
#jsddm{    width:1000px; margin:0 auto; font-size:14px;}/*對整個ul*/
#jsddm li { float: left; list-style: none; width:166px; line-height:45px; text-align:center; position:relative; font-size:16px;}/*Ul下的li*/
#jsddm li a { display: block; text-decoration: none; color:#FFF; white-space: nowrap}
#jsddm li a:hover { background:url(../images/nav_ul.png) no-repeat;/*導(dǎo)航下拉菜單圖片*/ height:30px; line-height:30px; margin:7.5px auto; width:115px;}
 
#jsddm li ul { width:166px; top:45px; left:0; position:absolute; z-index:999; visibility:hidden; }
#jsddm li ul li { float:none/*對象不浮動*/; display:inline; width:166px; height:30px; line-height:30px; font-size:12px;}
#jsddm li ul li a { display:block; color:#fff; background:#e43b57;}
#jsddm li ul li a:hover { color:#ffb323; border-radius:0px; margin:0 auto; width:166px; height:30px; background:#e43b57;}
.nav_ul_ul_li { background:none;}
以上為CSS樣式，部分內(nèi)容可自行修改，例如背景色、寬度等；
 
最后就是JS部分了，別忘了要把JS庫引用到文件里哦：
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 
還要再引用一個JS文件，就是菜單執(zhí)行的動作：
<script type="text/javascript" src="js/caidan.js">
var timeout         = 500;
var closetimer          = 0;
var ddmenuitem      = 0;
 
function jsddm_open()
{        jsddm_canceltimer();
         jsddm_close();
         ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
 
function jsddm_close()
{        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
 
function jsddm_timer()
{        closetimer = window.setTimeout(jsddm_close, timeout);}
 
function jsddm_canceltimer()
{        if(closetimer)
         {        window.clearTimeout(closetimer);
                   closetimer = null;}}
 
$(document).ready(function()
{        $('#jsddm > li').bind('mouseover', jsddm_open);
         $('#jsddm > li').bind('mouseout',  jsddm_timer);});
 
document.onclick = jsddm_close;
</script>
最后我們來預(yù)覽一下：
看，是不是圓角了呢，如果覺得圓度不夠的話，可以再重新切圖，這樣做的好處是用到的CSS3樣式少，所以兼容性比較好，它可以兼容各種瀏覽器，IE瀏覽器的話可兼容到IE8。并且用戶可在后臺任意添加或刪除下拉菜單列表而沒有任何影響。