better design 드롭다운 Button
<html>
<head>
</head>
<body>
<nav>
<ul class="n-list">
<li><a href="#">네비게이션1</a>
<ul class="drop"-down">
<li>
<a href="#">네비1-1</a></li>
<hr class="dashed">
</li>
<li><a href="#">네비1-2</a></li>
<li><a href="#">네비1-3</a></li>
<li><a href="#">네비1-4</a></li>
</ul>
</li>
<li><a href="#">네비게이션2</a>
<ul class="drop"-down">
<li>
<a href="#">네비1-1</a></li>
<hr class="dashed">
<li>
<a href="#">네비1-2</a></li>
<hr class="dashed">
<li>
<a href="#">네비1-3</a></li>
<hr class="dashed">
</li>
<li><a href="#">네비1-4</a></li>
<hr class="dashed">
</ul>
<li><a href="#">네비게이션3</a></li>
<li><a href="#">네비게이션4</a></li>
<li><a href="#">네비게이션5</a></li>
</ul>
</nav>
</body>
</html>
index_CSS tag
margin-top:20px;
}
ul.n-list{ 69
width:100%;
margin:0;
padding:0;
}
ul.n-list > li > a{
width:15%;
background-color:black;
float:left;
list-style:none;
margin-left:4.16%;
margin-top:5px;
}
ul.n-list
color:white;
transition:1s;
}
.thum{ 203
position:relative;
overflow;hidden;
}
.thum:hover .hover-text{
top:0;
}
/* 드롭다운 */
.drop-down{ 212
width:100%;
padding:0;
margin:0;
position:absolute;
height:0;
overflow: hidden;
transition;1s;
}
.n-list>li{
position:relative;
}
.drop-down>li{
list-style-type;none;
background-color; black;
}
.drop-dwon>li>a{
display:flex;
width;100%;
height:50px; 228
align-items: center;
toxt-indont:20px;
backrouund-color:black;
}
.n-list>li:hover .drop-down{
height:250px;
]
.dashed{
background-color:block;
margin:auto;
width;80%;
height:1px;
border-top:1px dashed white;
border-bottom;none;
}
@media screen and (max-width:800px){
nav{
width:95%;
html
css
java
https://velog.io/@dpdnjs402/uq0d5qph
구글: https://www.google.co.kr/
https://velog.io/@kauthenticity/HTML-CSS-드롭다운-메뉴-만들기
첫댓글 https://www.google.co.kr/search?q=%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4%EB%B2%84%ED%8A%BC&sxsrf=ALiCzsZmYtJOfPo_Vs4oG1A-0v4ix5vUUg%3A1668566631341&source=hp&ei=Z050Y7fNEsve2roPp6yPyAw&iflsig=AJiK0e8AAAAAY3RcdywSsFLMvGRdo9urLQiKSwV3yBj3&ved=0ahUKEwj3nN-K17H7AhVLr1YBHSfWA8kQ4dUDCAo&uact=5&oq=%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4%EB%B2%84%ED%8A%BC&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEOgcIIxDqAhAnOgQIIxAnOhAIABCABBCHAhCxAxCDARAUOgsILhCABBCxAxCDAToRCC4QgAQQsQMQgwEQxwEQ0QM6CwgAEIAEELEDEIMBOgQIABADOggIABCABBCxAzoKCAAQsQMQgwEQQzoECAAQQzoLCC4QgwEQsQMQgAQ6EwguEIMBEMcBELEDENEDEIAEEEM6CAguEIAEENQCOgoIABCABBCHAhAU