익스7에서 메뉴가 틀어지는 문제..
본문
이미지로 메뉴를 넣었는데요
버젼 다 문제 없는데 익스7 버전에서 맨 뒤에 있는 이미지 메뉴 한개가(menu07.jpg")자리 이탈하고 아래로 내려가 버립니다. 이미지의 가로 총 합은 1024px이고요...
어떻게 해줘야 자기 자리에 있을까요.
<div id="top_menu">
<p class="menu_line"></p>
<ul>
<li><img src="/images/brand.jpg"></a></li>
<li><a href="/list.php?ca_id=10"><img src="/images/menu01.jpg" border="0"></a>
<ul>
<li><a href="/list.php?ca_id=1010">메뉴1</a></li>
<li><a href="/list.php?ca_id=1020">메뉴2</a></li>
<li><a href="/list.php?ca_id=1030">메뉴3</a></li>
<li><a href="/list.php?ca_id=1040">메뉴4</a></li>
</ul>
</li>
<li><a href="/list.php?ca_id=20"><img src="/images/menu02.jpg" border="0"></a></li>
<li><a href="/list.php?ca_id=3010"><img src="/images/menu03.jpg" border="0"></a></li>
<li><a href="/list.php?ca_id=3020"><img src="/images/menu04.jpg" border="0"></a></li>
<li><a href="/list.php?ca_id=40"><img src="/images/menu05.jpg" border="0"></a></li>
<li><a href="/list.php?ca_id=50"><img src="/images/menu06.jpg" border="0"></a></li>
<li>a href="/list.php?ca_id=60"><img src="/images/menu07.jpg" border="0"></a></li>
</ul>
<p class="menu_line"></p>
</div>
#top_menu {float:left;padding:0 ; width:1024px}
#top_menu ul { list-style:none; margin:0; padding:0; }
#top_menu li { margin: 0 0 0 0; padding: 0 0 0 0; border : 0; float: left; }
/* 서브메뉴 영역*/
#top_menu ul ul{display:none}
#top_menu ul li:hover ul{ display:block; width:100px; height:25px;position:absolute; left:135px; top:140px;}
#top_menu li li{width:100px; height:25px; background-color:white; text-align:center; border:1px solid #d5d5d5;}
#top_menu li li a{ display:block; width:100%; height:100%; font:bold 12px/25px "맑은 고딕", arial;}
#top_menu li li a:hover{color:#db1da3; background:none;}
/*서브끝*/
.menu_line {margin:0;height:1px; background:#db1da3;}
#top_menu ul { list-style:none; margin:0; padding:0; }
#top_menu li { margin: 0 0 0 0; padding: 0 0 0 0; border : 0; float: left; }
/* 서브메뉴 영역*/
#top_menu ul ul{display:none}
#top_menu ul li:hover ul{ display:block; width:100px; height:25px;position:absolute; left:135px; top:140px;}
#top_menu li li{width:100px; height:25px; background-color:white; text-align:center; border:1px solid #d5d5d5;}
#top_menu li li a{ display:block; width:100%; height:100%; font:bold 12px/25px "맑은 고딕", arial;}
#top_menu li li a:hover{color:#db1da3; background:none;}
/*서브끝*/
.menu_line {margin:0;height:1px; background:#db1da3;}
답변 2
메타 : <meta http-equiv="X-UA-Compatible" content="IE=edge" />
최신버전으로 맞추어주는거구요.
익스7핵 : http://jaynee.tistory.com/51
익스7만 적용되도록 해주는거에요.
meta로 버전 맞추어도 되지만 사용하다보니 특정 익스 이상버전을 설치 안한사람도 있더라고요. 그런사람들은 메타를 아무리 넣어줘도 그 이상버전으로 갈수가 없죠... 그래서 핵으로 적용 해주는것도 좋아요.
드래곤 된다 님 감사합니다. 해결됐어요
그리고 원본글에 <li>a href="/list.php?ca_id=60"><img src="/images/menu07.jpg" border="0"></a></li>
이거는 제 파일에는 <li><a href="/list.php?ca_id=60"><img src="/images/menu07.jpg" border="0"></a></li>
돼 있습니다. 복사과정에서 <빠져서 그렇습니다
답변을 작성하시기 전에 로그인 해주세요.
