相信有不少朋友在制作网站时，都遇到过圆角下拉菜单这种情况，有的朋友甚至想过用CSS+JS的方法，其实不必那么麻烦，纯CSS就可以完成哦，下面给大家详细介绍网站制作时，如何制作出圆角的下拉菜单：
首先，准备一个圆角的下拉菜单的图片，我们随便给图片命名为：nav_n_li.png；
其次我们将Html布局，内容如下：
<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">产品中心</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">售后服务</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">联系我们</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>
以上为导航条的布局，我们是将nav_n_li.png图片放在每一个下拉菜单里，给最后一个li的；
 
接下来，我们再把样式写出来，内容如下：
.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;/*导航下拉菜单图片*/ 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样式，部分内容可自行修改，例如背景色、宽度等；
 
最后就是JS部分了，别忘了要把JS库引用到文件里哦：
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 
还要再引用一个JS文件，就是菜单执行的动作：
<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>
最后我们来预览一下：
看，是不是圆角了呢，如果觉得圆度不够的话，可以再重新切图，这样做的好处是用到的CSS3样式少，所以兼容性比较好，它可以兼容各种浏览器，IE浏览器的话可兼容到IE8。并且用户可在后台任意添加或删除下拉菜单列表而没有任何影响。