想做一个 下拉菜单后边跟个搜索框 html代码如何写

《DIV》《Input

type=text》《i》你的放大镜的图标《/i》《DIV》

下拉

<div>默认值</div>

《ul》

<li><i>你的图标</i>选项一</li>

<li><i>你的图标</i>选项2</li>

《/ul》

**或者可以用list-style的项目号来做。

3种实现方式：

点击导航，页面刷新，加载完成后重新使导航内容为刷新前的内容，通过url中传参就可以达到了。

采用单页面的方式，内容都写在页面中，初始化时，仅显示当前内容，其他内容隐藏，通过点击导航条来切换需要显示的内容。

采用iframe的方式，要显示的内容在主html中，内容显示在html的iframe标签中，通过改变iframe的src来加载不同的内容。

目前很多网站都是采用第一种方式；论体验，第二种方式好；论方便，选择1,3种方式！

<div class="wrap">

<div class="position fl">

<a href="">合肥</a>

</div>

<div class="serch fr">

<input type="input" placeholder="请输入关键字" class="ser fl"/><input type="submit" class="submit fl" value="搜索" />

</div>

</div>

<div class="tanchu">

<div style="background:#eaeaeaoverflow:autoheight:300px">

<ul class="left">

<li class="bg">安徽<span class="fr">></span></li>

<li>北京<span class="fr">></span></li>

<li>浙江<span class="fr">></span></li>

<li>湖南<span class="fr">></span></li>

<li>湖北<span class="fr">></span></li>

<li>江苏<span class="fr">></span></li>

<li>山西<span class="fr">></span></li>

<li>广东<span class="fr">></span></li>

<li>天津<span class="fr">></span></li>

<li>云南<span class="fr">></span></li>

<li>山东<span class="fr">></span></li>

<li>福建<span class="fr">></span></li>

<li>吉林<span class="fr">></span></li>

</ul>

<ul class="right">

<li class="erji">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>杭州</li>

<li>台州</li>

<li>天台</li>

<li>绍兴</li>

<li>舟山</li>

<li>宁波</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>杭州</li>

<li>台州</li>

<li>天台</li>

<li>绍兴</li>

<li>舟山</li>

<li>宁波</li>

</ul>

</li>

<li class="erji">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>杭州</li>

<li>台州</li>

<li>天台</li>

<li>绍兴</li>

<li>舟山</li>

<li>宁波</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

</ul>

</div>

</div>

JS代码：

<script>

$(function(){

$(".position") .toggle(

function(){

$(".tanchu").show()

},

function(){

$(".tanchu").hide()

})

})

</script>