这就是做的效果图。
//header部分
<div id="header">
<div id="logo">
<img src="../images/logo.gif" width="181" height="45"/>
</div>
<div id="search">
<form action="" method="get" name="form1">
搜索产品
<input class="inp_srh" name="input1" type="text" />
<input class="btn_srh" type="submit" value=""/>
</form>
</div>
</div>
//导航
<div id="nav">
<div class="nav_main">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
<li><a href="#"><span>企业简介</span></a></li>
<li><a href="#"><span>产品展厅</span></a></li>
<li><a href="#"><span>企业历史</span></a></li>
<li><a href="#"><span>招商加盟</span></a></li>
<li><a href="#"><span>网上下单</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div class="nav_son">
<ul>
<li><a href="#">企业动态</a></li>
<li><a href="#">领导活动</a></li>
<li><a href="#">产品资讯</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</div>
#content #header {
height: 70px;
margin-bottom: 8px;
}
#content #header #logo {
float: left;
margin-top: 15px;
}
#content #header #search {
float: right;
margin-top: 30px;
}
#content #header #search form .inp_srh {
background-image: url(../images/srh_bg.gif);
height: 17px;
width: 140px;
border: 1px solid #CCC;
}
#content #header #search form .btn_srh {
background-image: url(../images/btn_srh.gif);
height: 23px;
width: 58px;
text-indent:-999em;
}
//nav css
#content #nav {
height: 66px;
margin-bottom: 8px;
}
#content #nav .nav_main {
height: 36px;
overflow: hidden;
background-color: #FF6600;
}
#content #nav .nav_main ul li {
font-size: 14px;
font-weight: bold;
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
#content #nav .nav_main ul li a {
line-height: 26px;
display: block;
float: left;
height: 26px;
padding-left: 20px;
}
#content #nav .nav_main ul li a:hover {
color: #FFF;
display: block;
background-color: #FFB66C;
border: 1px solid #FFF;
border-radius:5px; /*圆角哦,注意*/
}
#content #nav .nav_son {
height: 30px;
}
#content #nav .nav_son ul li {
float: left;
margin-top: 4px;
}
#content #nav .nav_son ul li a {
line-height: 22px;
display: block;
height: 22px;
width: 78px;
text-align: center;
color: #333;
}
#content #nav .nav_son ul li a:hover {
display: block;
border-radius: 3px;
border: 1px solid #CCC;
background-color: #FFF;
color: #333;
}