드롭다운

세로 드롭다운

주메뉴 ul만 보여주게 부메뉴 ul를  display:none을 해준다

주매뉴 ul 의 li를 누르면 그의 자식 li가 드롭다운 되게 해준다 dispaly:block를 쓴다,

 

<div class="userMenu">
  <ul class="dropdown">

  <li class="list1"><a href="/mypage/main">My Info</a>
  
  	<ul class="list2">
  		<li class="list3"><a href="/mypage/profile">프로필수정</a></li>
  		<li class="list3"><a href="/mypage/userInfo">회원 정보</a></li>
  	</ul>
  </li>
  <li class="list1"><a href="../mypage/mymeeting">모임</a>
  
  	<ul class="list2">
  		<li class="list3"><a href="../mypage/mymeeting">등록한 모임</a></li>
  		<li class="list3"><a href="../mypage/meeting">내 모임신청 현황</a></li>
  		<li class="list3"><a href="../mypage/myapplication">나의 신청 현황</a></li>
  	</ul>
  </li>	
  <li class="list1"><a href="#">구매</a>
  
  	<ul class="list2">
  		<li class="list3"><a href="/store/shoppingbasket">장바구니</a></li>
  		<li class="list3"><a href="/store/buylist">결제 내역</a></li>
  	</ul>
  	</li>
  <li class="list1"><a href="/mypage/friendList">친구</a>
  	<ul class="list2">
  		<li class="list3"><a href="/mypage/friendfind">친구 찾기</a></li>
  		<li class="list3"><a href="/mypage/friendList">내친구 목록</a></li>
  	</ul>
  </li>
  <li class="list1"><a href="/mypage/myBoarddetail">커뮤니티</a></li>
 
</ul>
<style type="text/css">
.userMenu{
	font-size: 22px;
	
}
.list1{
	margin-top : 20px;
	padding-bottom: 15px;
}
.list2{
	padding-bottom: 13px;
}

.dropdown{
	display: inline-block;
	margin: 0;
	pause: 0;
	position: relative;
}
.dropdown .list2 {
	display: none;
/* 	position: absolute; */
	left: 60px;
	top: 20px;
}
.dropdown .list1:hover>.list2 {
	display: block;
}

.list3{
	padding-top:10px;
	padding-bottom: 15px;
}
.list3:hover{
	border-left: 3px solid #371e06;
	padding-left: 5px;
}

</style>

결과 화면