홈페이지 예제에서 드롭다운메뉴 추가방법 채택완료

</p>

<p><nav class="hide"></p>

<p><a href="index.html">Home</a></p>

<p><a href="generic.html">Generic</a></p>

<p><a href="elements.html">Elements</a></p>

<p></nav></p>

<p>

</p>

<p>nav {</p>

<p>  margin-right: 70px;</p>

<p>  -webkit-transition: all 0.3s ease 0s;</p>

<p>  -moz-transition: all 0.3s ease 0s;</p>

<p>  -o-transition: all 0.3s ease 0s;</p>

<p>  transition: all 0.3s ease 0s;</p>

<p>  transform-origin: 100% 50%;</p>

<p>}</p>

<p> </p>

<p>@media (max-width: 767px) {</p>

<p>  nav {</p>

<p>    margin-right: 0;</p>

<p>    position: absolute;</p>

<p>    right: 0;</p>

<p>    top: 47px;</p>

<p>    text-align: right;</p>

<p>    padding: 20px 0;</p>

<p>    z-index: 5;</p>

<p>    background: #fff;</p>

<p>  }</p>

<p>}</p>

<p> </p>

<p>nav.hide {</p>

<p>  transform: scale(0);</p>

<p>}</p>

<p> </p>

<p>nav a {</p>

<p>  font-size: 12px;</p>

<p>  font-weight: 500;</p>

<p>  text-transform: uppercase;</p>

<p>  color: #777777;</p>

<p>  margin: 0 25px;</p>

<p>  display: inline-block;</p>

<p>  margin: 0 0px;</p>

<p>  display: inline-block;</p>

<p>  padding: 34px;</p>

<p>}</p>

<p> </p>

<p>nav a:hover {</p>

<p>  color: #fff;</p>

<p>  background: #a387ff;</p>

<p>}</p>

<p> </p>

<p>@media (max-width: 767px) {</p>

<p>  nav a {</p>

<p>    padding: 15px 30px;</p>

<p>  }</p>

<p>  nav a:hover {</p>

<p>    background: transparent;</p>

<p>    color: #a387ff;</p>

<p>  }</p>

<p>}</p>

<p>