<ul class="header_login">
<li>下载</li>
<li>马上登录</li>
<li>注册</li>
</ul>
<div class="header_search_wrapper">
<form>
<span id="search_tab">
<a href="#">商品</a>
<i class="icon_1"></i>
<span class="header_search_sub">
<a href="#">商品</a>
<a href="#">店铺</a>
</span>
</span>
<span>
<input type="text" required="required" class="search_input" placeholder="请输入关键词……">
<input type="submit" value="搜索">
</span>
</form>
</div>
.header_search_wrapper {
/* 包装器的相对定位*/
position:relative;
float: right;
height: 45px;
width: 425px;
line-height: 45px;
margin: 13px;
border: 2px solid #7FC7A0;
background-color: #474645;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
}
/* span 的绝对定位*/
.header_search_sub {width: 52px; display:block; position:absolute;}
.header_search_sub a {background-color:#FbFbFb; display:block; color:#7B7E7D; border:2px #81CF82 solid;}
.search_input {height:30px; width:300px;}
.header_login {float:right; line-height:70px; list-style:none;}
.header_login li {float:left; width:75px; color:#747878;}
.icon_1 {width:15px; height:12px; background:url(../images/i_1.jpg) left no-repeat; display:inline-block;}
/* span 的绝对定位*/
.header_search_sub {width: 52px; display:block; position:absolute; left:-1px;}
.header_search_sub a {background-color:#FbFbFb; display:block; color:#7B7E7D; border:2px #81CF82 solid;}
.search_input {height:30px; width:300px;}
.header_login {float:right; line-height:70px; list-style:none;}
.header_login li {float:left; width:75px; color:#747878;}
.icon_1 {width:15px; height:12px; background:url(../images/i_1.jpg) left no-repeat; display:inline-block;}
未来99