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건
+
제목 글쓴이 날짜 조회
13-07-14 조회 5,461
13-07-14 조회 5,422
13-07-14 조회 4,713
13-07-14 조회 4,319
13-07-14 조회 4,183
13-07-14 조회 4,240
13-07-14 조회 4,968
13-07-14 조회 4,644
13-07-14 조회 4,389
13-07-14 조회 5,424
13-07-14 조회 5,327
13-07-14 조회 5,093
13-07-14 조회 4,817
13-07-14 조회 5,504
13-07-13 조회 3,770
13-07-01 조회 5,772
13-07-01 조회 5,856
13-07-01 조회 3,957
13-07-01 조회 5,450
13-05-27 조회 4,017
13-05-21 조회 5,063
13-05-02 조회 1만
13-04-29 조회 5,260
13-04-15 조회 5,509
13-04-13 조회 6,446
13-02-27 조회 4,138
13-02-26 조회 6,528
13-02-12 조회 5,295
13-02-01 조회 2.3만
13-01-23 조회 3,580
13-01-09 조회 8,061
13-01-07 조회 4,975
13-01-07 조회 3,724
13-01-04 조회 1.3만
13-01-03 조회 1.2만
12-12-31 조회 6,415
12-12-27 조회 4,548
12-12-27 조회 4,230
12-12-27 조회 8,905
12-12-18 조회 3,722
12-12-12 조회 3,752
12-12-12 조회 6,789
12-12-12 조회 8,202
12-12-05 조회 5,493
12-12-01 조회 6,805
12-11-22 조회 4,710
12-11-09 조회 5,562
12-11-09 조회 7,627
12-10-29 조회 4,835
12-10-16 조회 6,383
12-10-09 조회 5,453
12-09-02 조회 4,563
12-09-01 조회 3,673
12-08-30 조회 4,332
12-08-30 조회 4,326
12-08-28 조회 3,667
12-08-21 조회 7,240
12-08-20 조회 3,762
12-08-18 조회 5,181
12-08-18 조회 3,553
12-08-11 조회 3,703
12-08-09 조회 3,876
12-08-07 조회 3,855
12-08-07 조회 4,432
12-08-01 조회 4,692
12-08-01 조회 4,581
12-07-20 조회 9,936
12-07-17 조회 4,300
12-07-15 조회 4,056
12-07-10 조회 4,326
12-07-09 조회 7,039
12-07-05 조회 3,372
12-07-04 조회 3,533
12-06-30 조회 5,768
12-06-28 조회 3,869
12-06-20 조회 4,026
12-06-16 조회 3,330
12-06-14 조회 3,977
12-06-07 조회 4,001
12-06-06 조회 6,362
12-05-27 조회 4,579
12-05-25 조회 3,331
12-05-25 조회 3,151
12-05-24 조회 3,270
12-05-24 조회 4,617
12-05-23 조회 3,996
12-05-22 조회 6,606
12-05-15 조회 4,139
12-05-15 조회 3,687
12-05-14 조회 3,126
12-05-12 조회 3,576
12-05-11 조회 7,076
12-05-07 조회 4,510
12-04-28 조회 3,709
12-04-25 조회 5,364
12-04-15 조회 3,941
12-04-12 조회 4,786
12-04-11 조회 3,547
12-04-08 조회 3,401
12-03-21 조회 6,445