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개

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

프로그램

8,188건
+
제목 글쓴이 날짜 조회
12-11-22 조회 4,668
12-11-22 조회 6,224
12-11-22 조회 6,210
12-11-22 조회 5,213
12-11-22 조회 8,428
12-11-21 조회 5,939
12-11-21 조회 8,525
12-11-20 조회 4,783
12-11-20 조회 2.4만
12-11-19 조회 3,905
12-11-19 조회 4,398
12-11-19 조회 2만
12-11-18 조회 5,345
12-11-16 조회 3,985
12-11-16 조회 6,398
12-11-16 조회 4,158
12-11-16 조회 4,422
12-11-15 조회 3,772
12-11-15 조회 5,535
12-11-15 조회 4,410
12-11-15 조회 3,686
12-11-14 조회 3,452
12-11-14 조회 1만
12-11-14 조회 4,943
12-11-13 조회 3,963
12-11-13 조회 3,766
12-11-12 조회 5,589
12-11-12 조회 3,956
12-11-11 조회 2.2만
12-11-09 조회 5,521
12-11-09 조회 5,743
12-11-09 조회 7,585
12-11-08 조회 4,824
12-11-06 조회 3,759
12-11-06 조회 3,911
12-11-06 조회 1.9만
12-11-05 조회 3,902
12-11-05 조회 4,787
12-11-05 조회 4,321
12-11-05 조회 4,060
12-11-04 조회 4,033
12-11-03 조회 4,120
12-11-03 조회 2.6만
12-11-02 조회 5,120
12-11-02 조회 3.2만
12-11-01 조회 5,111
12-11-01 조회 2.6만
12-10-30 조회 8,296
12-10-30 조회 3,826
12-10-29 조회 3,892
12-10-29 조회 5,141
12-10-29 조회 3,965
12-10-29 조회 4,804
12-10-28 조회 4,037
12-10-26 조회 3,822
12-10-26 조회 9,848
12-10-26 조회 8,112
12-10-25 조회 3,970
12-10-25 조회 4,032
12-10-25 조회 8,155
12-10-24 조회 9,633
12-10-23 조회 4,057
12-10-23 조회 3,337
12-10-23 조회 3,657
12-10-23 조회 4,891
12-10-22 조회 8,467
12-10-21 조회 4,003
12-10-20 조회 4,625
12-10-19 조회 4,445
12-10-19 조회 3,453
12-10-18 조회 4,095
12-10-18 조회 3,699
12-10-18 조회 3,537
12-10-17 조회 9,364
12-10-17 조회 3,672
12-10-16 조회 3,512
12-10-16 조회 5,598
12-10-16 조회 4,026
12-10-16 조회 6,361
12-10-16 조회 4,213
12-10-15 조회 3,932
12-10-15 조회 3,433
12-10-15 조회 3,413
12-10-14 조회 3,766
12-10-13 조회 3,780
12-10-12 조회 4,682
12-10-12 조회 4,004
12-10-11 조회 5,032
12-10-11 조회 4,029
12-10-10 조회 7,049
12-10-10 조회 6,374
12-10-10 조회 7,967
12-10-10 조회 1.1만
12-10-10 조회 5,605
12-10-10 조회 5,160
12-10-10 조회 3,497
12-10-09 조회 5,963
12-10-09 조회 3,709
12-10-09 조회 7,261
12-10-09 조회 5,425