드롭다운 css - Dropdown Navbar
꼭 JAVA? Query?를 써야 하는것잉가
출처 : https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
이런식으로 수정해보고 할수있게 되어있어
이걸 쿼리로덮어야 하는건가하는 고뇌에 빠질뻔했는데
이 소스를 바탕으로 스타일 시트로만 가능하게 될것 같은느낌적인느낌?
일단 찾았으니 적용 해보쟈응
<!DOCTYPE html><html><head><style>ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}
li { float: left;}
li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn { background-color: red;}
li.dropdown { display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block;}</style></head><body>
<ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li></ul>
<h3>Dropdown Menu inside a Navigation Bar</h3><p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body></html>
작업중 결론 도출해버리는 각
이뻐질라면 어쩔수없는 현실;;; 쿼리도 쓰고 스타일시트도 쓰고 다써야;; 이쁴게나온다는거
"이쁴게 해줄까아~말까아~"
ps.
세상에 일단 에디터는 잘 작동하는건 확인완료!! 그르나아 브라우저마다 속성을 타는건지
잘안먹히는 상황도 있다능거
시상에 마상에 말이지 그래도 일단 샘플링하는데는 매우 굿!!!
이뻐질라면 어쩔수없는 현실;;; 쿼리도 쓰고 스타일시트도 쓰고 다써야;; 이쁴게나온다는거
"이쁴게 해줄까아~말까아~"
ps.
세상에 일단 에디터는 잘 작동하는건 확인완료!! 그르나아 브라우저마다 속성을 타는건지
잘안먹히는 상황도 있다능거
시상에 마상에 말이지 그래도 일단 샘플링하는데는 매우 굿!!!
댓글
댓글 쓰기