p

css를 이용한 2차 메뉴입니다.

html 소스 내용
<div id="wrapper">
 <div id="headerMain">
 <nav id="headerNavi">
 <ul id="mainNavi">
  <li id="">
  <a href="#">메뉴 1</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 2</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 3</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 4</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
  <li id="">
  <a href="#">메뉴 5</a>
  <ul>
   <li id=""><a href="#">하위메뉴 1</a></li>
   <li id=""><a href="#">하위메뉴 2</a></li>
  </ul>
  </li>
 </ul>
 </nav>
 </div
</div>
 
css소스의 내용
@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, figure, fieldset, input, th, td{
 margin:0;padding:0;
}
/*기본 font 설정*/
body{
 font-size:0.75em;
 font-family:돋움,dotum,굴림,gulim,arial;
 color:#414042;  
}
a{ color:#414042;text-decoration:none; }
a:hover{ color:#414042;text-decoration:none; }
a:focus{ color:#414042;text-decoration:none; }
a:active{ color:#414042;text-decoration:none; }
/* 메인메뉴 */
#mainNavi{
 list-style:none;
}
#mainNavi > li{
 float:left;
}
#mainNavi > li  a{
 display:block;
 padding-left:30px;
 padding-right:30px;
 width:100px;
 
 border:2px solid #ccc;
 font-size:1.2em;
 /* font-family:"Lucida Sans Unicode", "Lucida Grande", "sans-serif"; */
 font-weight:800;
 color:#fff;
 text-align:center;
 vertical-align:middle;
 overflow:hidden;
 
 /* 단추 색상과 그림자 스타일*/
 background-color:#ff9900;
 border-top-color:#ff6633;
 border-bottom-color:#ff6633;
 border-left-color:#ff6633;
}
#mainNavi li a:hover{
 color:#000;
}
#mainNavi li ul{
 opacity:0;
 position:absolute;
 width:160px;
 list-style-type:none;
}
#mainNavi li:hover ul{
 opacity:1;
}
#mainNavi li ul li{
 height: 0;
 line-height:0;
}
#mainNavi li:hover ul li{
 height:24px;
 line-height:20px;
}
#mainNavi li ul li a{
}
#mainNavi li ul li a:hover{
}
|

댓글 7개

좋은정보 감사합니다.
좋은정보 감사드려요
감사합니다
좋은 자료 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다. 로그인

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
반응형 13년 전 조회 6,856
CSS 13년 전 조회 6,470
웹접근성 13년 전 조회 3.7만
HTML 13년 전 조회 4,380
HTML 13년 전 조회 8,102
CSS 13년 전 조회 5,489
HTML 13년 전 조회 5,853
CSS 13년 전 조회 3,934
웹접근성 13년 전 조회 3,803
웹접근성 13년 전 조회 1.3만
CSS 13년 전 조회 4,252
웹접근성 13년 전 조회 5,907
CSS 13년 전 조회 4,961
HTML 13년 전 조회 7,430
CSS 13년 전 조회 5,878
기타 13년 전 조회 1.1만
HTML 13년 전 조회 4,841
HTML 13년 전 조회 4,385
기타 13년 전 조회 3,564
CSS 13년 전 조회 3,707
HTML 13년 전 조회 6,362
반응형 13년 전 조회 6,627
CSS 13년 전 조회 3,854
HTML 13년 전 조회 3,667
HTML 13년 전 조회 4,993
HTML 13년 전 조회 3,424
HTML 13년 전 조회 3,200
HTML 13년 전 조회 3,674
HTML 13년 전 조회 3,677
HTML 13년 전 조회 2,491
🐛 버그신고