그누보드 - html5/css3 드롭다운 메뉴 z-index 지정 자리를 못찾겠습니다 ㅠㅠ도와주세요!!

html5/css3 드롭다운 메뉴 z-index 지정 자리를 못찾겠습니다 ㅠㅠ도와주세요!! > 자유게시판

자유게시판

html5/css3 드롭다운 메뉴 z-index 지정 자리를 못찾겠습니다 ㅠㅠ도와주세요!! 정보

html5/css3 드롭다운 메뉴 z-index 지정 자리를 못찾겠습니다 ㅠㅠ도와주세요!!

제임스쉥 자기소개 아이디로 검색 회원게시물 (112.♡.♡.31)
2013.10.09 15:22:42
조회 1,887
댓글 3

본문

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>레이아웃1 </title>
<link href="layout1.css" rel="stylesheet" type="text/css">
<style type="text/css">

  body{
   background:#368AFF
   font-family:verdana;

  }



  .menuContainer{
   display:block;


   margin-right:auto;
   margin-left:auto;

   font-size:18px;

   padding:10px 10px;
   text-align:center;/*메뉴 위치*/

   width:182px;
   height:25px;
   max-height:25px;

   background:#368AFF;/*배경 색상*/
   cursor:pointer;
   border:1px solid black;/*테두리 색상*/
   float:left;
   z-index:1;

  }

  .menuContainer .icon{

   display: inline-block;
   -webkit-transition:0.3s ease-in-out;

  }


  .menuContainer:hover {
   border:1px solid #fff;
  }
  /* 마우스 오버 시 아이콘 스타일 지정 */
  .menuContainer:hover .icon{
   -webkit-transform: rotate(45deg);
     z-index:1;
  }


  .menuContainer:hover .subContainer{
   display: inline-block;
   border:1px solid #fff;
  }


  /* 서브 메뉴 컨테이너 스타일 지정*/
  .subContainer{
   display:none;
   width:182px;
   background:#368AFF;/* 세부 메뉴 색상 지정*/
   padding:10px 10px;
   margin-left:-11px;
   margion-top:20px;
   border:1px solid #999;
   -webkit-box-shadow:0px 12px 25px rgba(0,0,0,0.2);
   -moz-box-shadow:0px 12px 25px rgba(0,0,0,0.2);
   box-shadow:0px 12px 25px rgba(0,0,0,0.2);
   z-index:1;

  }

  .subContainer li{
   list-style-type:none;
   border-bottom:1px dotted #eaeaea;

   height:22px;
   padding:8px 0px;
   z-index:1;
  }

  /* 서브메뉴 마우스 오버 시 스타일 지정*/
  .subContainer li:hover{
   border-bottom:1px dotted #bababa;
   z-index:1;
  }


</style>

</header>

</head>

<body>

<img src="jang.jpg">
<hgroup>
    <h1>HTML5와 CSS3을 이용한 웹 사이트 개발</h1>
        <h2>Article에 해당하는 내용이 들어갑니다. </h2>
    </hgroup>

<p>HTML5와 CSS3을 이용해서 다양한 웹 페이지 레이아웃을 구성해 보겠습니다.<br>
     웹 페이지의 레이아웃은 일정한 패턴이 있습니다. <br>
     따라서 CSS를 이용해서 레이아웃을 잡는 연습을 많이 하게 되면, 사이트를 새로 만들거나, 유지 보수 시 매우 편리합니다.
    </p>

    <section>
      <h2>Section 내용입니다. </h2>
        HTML5의 시멘틱 태그는 다음과 같습니다.<br>
        header,footer, nav, article, section, aside, hgroup
    </section>
</article>
<div class="clear"></div>
<footer>
  현재 웹 페이지에 대한 권리는 독자 모두에게 공개되었습니다. (footer 입니다.)
</footer>
</div>

</body>
</html>