导航条的二级菜单和li不对齐，搜索框出现问题
为什么我的二级菜单和li对不齐啊？还有我的input和搜索图片似乎不在.search里，点击input时input的边框也去除不了。我应该怎么改啊？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>青旅社区</title>
<style type="text/css" >
header{
width:960px;
height:55px;
line-height:50px;
background-color:#02336b;
}
.logo{
float:left;
}
nav{
float:left;
width:500px;
height:50px;
}
nav ul{
list-style:none;
}
nav ul li{
list-style:none;
margin-left:30px;
float:left;
}
nav ul li a{
text-decoration:none;
color:#fff;
font-size:19px;
}
nav ul li a:hover{
border-bottom:2px solid #4D4945;
}
nav ul li ul{
width:120px;
position:absolute;
left:-999px;
}
nav ul li:hover ul{
left:auto;
z-index:9999;
}
nav ul li ul li{
height:35px;
line-height:35px;
text-align:center;
padding:0 3px;
}
nav ul li:hover ul li{
float:none;
display:block;
background-color:#337ab7;
color:#fff;
}
nav ul li:hover ul li a{
display:block;
padding:0 3px;
background-color:#337ab7;
color:#fff;
}
nav ul li:hover ul li a:hover{
text-decoration:none;
background-color:#5c9cff;
}
.search{
height:30px;
width:160px;
margin-top:13px;
float:left;
border:1px solid gray;
border-radius:30px;
}
.search input{
width:110px;
border:none;
background:none;
margin-right:5px;
}
.notice{
float:right;
}
.notice li{
list-style:none;
float:left;
margin-left:30px;
}
.notice li a{
text-decoration:none;
color:#fff;
font-size:18px;
}
.notice li ul{
width:120px;
position:absolute;
left:-999px;
}
.notice li a:hover{
border-bottom:2px solid #4D4945;
text-decoration:none;
}
.notice li:hover ul{
left:auto;
z-index:9999;
}
.notice li ul li{
height:35px;
line-height:35px;
text-align:center;
}
.notice li:hover ul li{
float:none;
display:block;
padding:0 3px;
background-color:#337ab7;
color:#fff;
}
.notice li:hover ul li a{
display:block;
padding:0 3px;
background-color:#337ab7;
color:#fff;
}
.notice li:hover ul li a:hover{
text-decoration:none;
background-color:#5c9cff;
}
</style>
</head>
<body>
<header>
<div class="logo">
<a href=" ">< img src="images/logo.png" alt="logo" width="" height="" /></a >
</div>
<nav>
<ul>
<li><a href="index.html">首页</a ></li>
<li><a href="#">热门畅游</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>
</ul>
</li>
<li><a href="#">看看美食</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>
</ul>
</li>
<li><a href="#">在线攻略</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>
</ul>
</li>
<li><a href="#">预约服务</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>
</ul>
</li>
</ul>
</nav>
<div class="search">
<input></input>
< img src="images/search.png" alt="搜索" width="18" height="18" >
</div>
<div class="notice">
<li><a href="#">< img src="images/notice.png" alt="通知" width="35" height="35" /></a >
<ul>
<li><a href="#">官方</a ></li>
<li><a href="#">通知</a ></li>
<li><a href="#">私信</a ></li>
<li><a href="#">查看更多</a ></li>
</ul>
</li>
<li><a href=" ">< img src="images/sz.jpg" alt="个人" width="35" height="35" /></a >
<ul>
<li><a href="#">小肥杨</a ></li>
<li><a href="#">个人主页</a ></li>
<li><a href="#">账户设置</a ></li>
<li><a href="#">退出</a ></li>
</ul>
</li>
</div>
</header>
</body>
</html>
您的代码应放代码片中，您的代码已被csdn浏览器解析，答主们已经看不到她的原来样子。😋😋