css 메뉴인데 익스6에서만 안되요 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

css 메뉴인데 익스6에서만 안되요 정보

css 메뉴인데 익스6에서만 안되요

본문

아래는 소스구요
익스8, 파이어폭스, 크롬, 사파리 다되는데.. 익스6에서만 안되요.
아무리 고쳐도 안되는데 ㅠㅠ

<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Menu1</a>
<ul>
        <li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
        </ul>
        </li>
<li><a href="#">Menu3</a>
        <ul>
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub2</a></li>
        </ul>

----------------------------------------------------------------------------------------

#nav {
font: normal 1.3em/1.3em arial;
background: #fff;
width: 900px;
margin: 100px auto;
color: #fff;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 10px 0;
background: #b4e2ef repeat-x 0 -110px;
line-height: 100%;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #b4e2ef; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.shadow(Color=#7c7c7c, direction=135, strength=2); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#b4e2ef), to(#b4e2ef)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #b4e2ef,  #b4e2ef); /* for firefox 3.6+ */
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
#nav a:hover {
background: #fff;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #fff; /* for non-css3 browsers */

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #fff); /* for firefox 3.6+ */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff'); /* for IE */
color: #7ccee3;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000000;
font: normal 0.8em/0.8em arial;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #000 !important; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #fff; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #fff); /* for firefox 3.6+ */
 
display: none;
margin: 0;
padding: 0;
width: 120px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;

}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0x;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}

댓글 전체

참고만 하세요
<ul>
<li></li>
</ul>
기본적으로 이렇게 UL  LI를 덮어서 사용을 합니다..

위에 보시면 이런게 있어서 참고만 하시라고 적어 드립니다..
<li><a href="#">Menu3</a>
        <ul>
전체 66,558 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT