<div class="wrap">
<ul class="nav">
<li><a href="#">首頁</a> </li>
<li><a href="#">聯絡我們</a></li>
<li class="button">
<a href="#">產品查詢</a>
<ul class="nav-hide">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</div>.wrap{
max-width:900px;
margin:0 auto;
background-color: yellow;
}
.nav{
display:flex;
justify-content: flex-end;
}
.nav li{
width:25%;
border:1px solid black;
text-align:center;
font-size:20px;
font-weight: 600;
}
.nav li a{
display:block;
padding-top:10px;
padding-bottom:10px;
text-decoration: none;
}
.nav li a:hover{
background-color:red;
color:white;
}
.nav-hide li{
width:100%;
padding:0;
padding-top:10px;
padding-bottom:10px;
}
.button{
position:relative;
}
.nav-hide{
position:absolute;
display:none;
top:40px;
left:0;
right:0;
}
$(document).ready(function(){
$('.button').click(function(e){
e.preventDefault();
$('.nav-hide').slideToggle();
})
})
External CSS
This Pen doesn't use any external CSS resources.