css 잘하시는분좀봐주세요 ㅠㅠ
본문
사이드 카테고리입니다 BMW PART 가 상품분류 면 마우스를 갖다댈시,밑으로펼쳐지면서
하위분류를 나타네게 할건데,네이버에 CSS드롭다운쳐보니 ㅠㅠ HTML CSS 구조를잘모르겠어서
수정을몬하고있네요 어떤식으로 해야할까요 ㅠㅠ
답변 2
<style>
ul.menu ol{ display:none}
ul.menu:hover ol{ display:block }
</style>
<ul class="menu">
<li><a href="#none">BMW PART</a>
<ol>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
</ol>
</li>
</ul>
나머지 스타일은 알아서 하세요
<style>
.subnav {background:#f4f4f4;border:1px solid #dedede;}
.subnav * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.subnav ul {list-style:none;margin:0;padding:0;}
.subnav li {position:relative;border-bottom:1px solid #dedede;}
.subnav li:last-child {border:0;}
.subnav li:hover {background:#dedede;}
.subnav li.sub1 {padding:7px 20px;}
.subnav li.sub1:before {position:absolute;top:15px;left:10px;content:" ";width:4px;height:4px;background:#888;}
.subnav li a {color:#000016;text-decoration:none;}
.subnav li:hover a {color:#fff;text-decoration:none;}
.subnav li.sub1:hover:before {background:#fff;}
.subnav li .sub2 {display:none}
.subnav li:hover .sub2 {display:block}
</style>
<div class="subnav">
<ul>
<li class="sub1">
<a href="#">1차 메뉴 1</a>
<ul class="sub2">
<li><a href="#">2차 메뉴 1-1</a><li>
<li><a href="#">2차 메뉴 1-2</a><li>
</ul>
</li>
<li class="sub1">
<a href="#">1차 메뉴 2</a>
<ul class="sub2">
<li><a href="#">2차 메뉴 2-1</a><li>
<li><a href="#">2차 메뉴 2-2</a><li>
</ul>
</li>
</ul>
</div>
실제로 테스트한 페이지 링크 : http://dodu.kr/subnav.html
css / html 제작 및 작성자 : 익명닉네임
!-->
답변을 작성하시기 전에 로그인 해주세요.