<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" http-equiv="content-type" content="text/html">
<title>Title</title>
<!--[if lt IE 7]>
<style>
.ficon{font-family:'fontello'}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'fontello';
src: url('font/fontello.eot');
src: url('font/fontello.eot#iefix') format('embedded-opentype'),
url('font/fontello.woff') format('woff'),
url('font/fontello.ttf') format('truetype'),
url('font/fontello.svg#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.ficon,[class^="ficon-"],[class^="ficon-"]:before,[class*=" ficon-"]:before {
font-family: "fontello";
font-size: 15px;
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
}
body{
font: 12px/1.5 tahoma,arial,sans-serif;
}
ul{
list-style: none;
display: block;
}
ul,li{
margin: 0px;
padding: 0px 0 0 0;
}
.search-list li a{
text-decoration: none;
color: #6c6c6c;
}
.search-list .select{
background: #f6f6f6;
display: block;
}
.search-list{
position: absolute;
top: 3px;
left: 3px;
background-color: white;
width: 71px;
height: 36px;
overflow: hidden;
border-left: 1px solid #f6f6f6;
border-right: 1px solid #e5e5e5;
}
.search-list li{
display: none;
height: 35px;
line-height: 35px;
overflow:hidden;
text-align: center;
}
.trigger-hover{
height: auto;
}
.trigger-hover li{
display: block;
}
.search-container{
position: relative;
}
.search-tips{
float: right;
padding: 3px 15px;
}
.search-btn{
float: right;
}
.search-tips a{
color: #333333;
text-decoration: none;
}
.btn-search{
background: url("search.png") 0px -152px;
width: 120px;
height: 43px;
border: 0px;
cursor: pointer;
}
.search-key{
height: 39px;
line-height: 39px;
padding: 2px 0 2px 79px;
overflow: hidden;
background-color: orangered;
}
.search-key input{
height: 35px;
width: 100%;
border: 0px none;
outline: none;
background-color: #ffffff;
}
.search-key i{
position: absolute;
top:14px;
left: 86px;
z-index: 2;
color: #333333;
}
.iconfont{
font-family: iconfont;
font-size: 12px;
font-style: italic;
}
</style>
</head>
<body>
<div class="search-container">
<div class="search-list" id="search-tap">
<ul>
<li id="tab1" class="select"><a href="">宝贝</a></li>
<li id="tab2" class=" "><a href="">店铺</a></li>
</ul>
</div>
<div class="search-pannel">
<form action="">
<div class="search-tips">
<a href="">
高级<br>搜索
</a>
</div>
<div class="search-btn">
<button class="btn-search" type="submit"></button>
</div>
<div class="search-key">
<input type="text" x-webkit-speech>
<i class="ficon" >

</i>
</div>
</form>
</div>
</div>
<script>
var getDOM=function(id){
return document.getElementById(id);
}
var addHandler=function (element,type,handler) {
var id=getDOM(element)||document;
if (id.addEventListener){
id.addEventListener(type,handler,false);//这个跟下面on事件相比，优势是元素可以添加多个事件
}else if (id.attachEvent){
id.attachEvent('on'+type,handler);
}else{
id['on'+type]=handler;
}
}
addHandler('search-tap','mouseover',function () {
this.className+=' trigger-hover';
});
addHandler('search_tab','mouseout',function(){
this.className=' search-list';//注意：类名前加空格
});
addHandler('tab1','mouseover',function () {
if(this.className.indexOf('select')<0){
this.className='select';
}
});
addHandler('tab1','mouseout',function () {
this.className=" ";
});
addHandler('tab1','click',function () {
getDOM('search-tap').className='search-list';
});
addHandler('tab2','mouseover',function () {
if(this.className.indexOf('select')<0){
this.className='select';
}
});
addHandler('tab2','mouseout',function () {
this.className=" ";
});
addHandler('tab2','click',function () {
getDOM('search-tap').className='search-list';
getDOM('tab1').className=" ";
});
</script>
</body>
</html>
