<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
a {
text-decoration: none;
}
li{
list-style: none;
cursor: pointer;
}
/*總樣式*/
.wrap {
width: 100%;
height:46px;
line-height:45px;
background-color:pink;
position: relative;
}/*整個導航欄的樣式*/
.first {
float: left;
height:46px;
width: 10%;
text-align: center;
border-right:1px solid lightpink;
}/*一級導航的樣式*/
#cart {
float: right;
margin-right: 1%;
}
#food {
border-left: 1px solid lightpink;
}
ul .first .second, ul .first .three, ul .first .four, ul .first .five {
border:1px solid pink;
border-top: none;/*實現一二級導航無縫顯示*/
position: absolute;
width: 40.3%;
display: none;
background-color:whitesmoke;
}/*二級導航樣式（絕對定位+給定元素寬度實現二級導航寬過一級導航）*/
ul .first .second, ul .first .three, ul .first .four, ul .first .five{
left: 0;
}
.first:hover{
background-color:whitesmoke;
}
.first:hover div {
display: block;
}
/*!*css方法鼠標懸停顯示二級導航*!*/
@media (max-width: 600px) {
.first {
width: 50px;
}
ul .first .second, ul .first .three, ul .first .four, ul .first .five{
width: 203px;
}
}/*解決屏幕變小樣式變形問題*/
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="first" id="food" >
<h3>美食</h3>
<div class="second pp " >
<p>chapter one</p>
</div>
</li>
<li class="first" id="movie">
<h3>電影</h3>
<div class="three pp">
<p>chapter two</p>
</div>
</li>
<li class="first" id="travel">
<h3>旅游</h3>
<div class="four pp">
<p>chapter three</p>
</div>
</li>
<li class="first" id="hotel">
<h3>酒店</h3>
<div class="five pp">
<p>chapter four</p>
</div>
</li>
</ul>
<div id="cart"><h3>購物車</h3></div>
</div>
<script>
$("h3").hover(function () {
$(this).next().show();
},function () {
$(this).next().hide();
})
//以下代碼解決hoverh3的時候，無法讓鼠標hover二級菜單，二級菜單顯示。
$(".pp").hover(function () {
$(this).show();
}, function () {
$(this).hide();
})
/*jquery方法實現二級導航的顯示與隱藏*/
</script>
</body>
</html>
文章列表
留言列表
