테스트 사이트 - 개발 중인 베타 버전입니다

고수님들 도와주세요...CSS를 적용한 메뉴인데 ...........틀이 깨지네요...

· 11년 전 · 890 · 2

그누보드에다가 예전에 테이블로 만들고 메뉴는 플래쉬로 만들었다가 메뉴부분만 CSS로 다시 만들었는데,

익스플로러11에서는 잘구동이 되는데 하위버전에서 CSS로 만들어진 메뉴부분만 틀이 깨지는데

제가 어떻게 손을 못대겠어요....

 

아래 코드인데 어떤부분을 고쳐야 되는지요....

고수님들의 도움의 손길을 기다립니다...

 

<?
</style>
include_once("./_common.php");
include_once("$g4[path]/head.sub.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
//echo outlogin("2ustory_white"); // basic 스킨으로 아웃로그인을 출력합니다.
$g4['title'] = " ";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

<title>수원 금호프라자에 오신것을 환영합니다.</title>

<style type="text/css">
.navi,
.navi ul,
.navi li,
.navi a {
 margin: 0;
 padding: 0;
 border: none;
}

.navi { 
 list-style-type: none;
 height: 40px;
}
.navi li {
 float: left;
 position: relative;
 background: #0066cc;
 z-index: 1; 

}

.navi li:first-child{
 -webkit-border-radius: 5px 0 0 0;
 -moz-border-radius: 5px 0 0 0;
 border-radius: 5px 0 0 0;
}

.navi li:last-child{
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius:  0 5px 0 0;
 border-radius:  0 5px 0 0;
}

.navi li a {
 display: block;
 font-family:"굴림",gulim,sans-rerif;
 font-weight:bold;
 width:110px;
 padding:0 20px;
 margin:10px 0;
 text-align:center;
 color: #ffffff;
 text-decoration: none;
 
 border-left:1px solid #006633;
 border-right:1px solid #003333;

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.navi li:first-child a{
border-left:0;
}

.navi li:last-child a{
border-right:0;
}

.navi li a:hover {
 color:#F90;
}
.navi li ul { 
 opacity: 0;
 position: absolute;
 left: 0;
 background: #3366cc;
 list-style-type: none;
 padding: 0;
 margin: 0;
  

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.navi li:hover ul{
 position:absolute;
 right:0;
}
.navi li:hover ul {
 opacity: 1;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
}
.navi li ul li {
 float: none;
 position: static;
 height: 0;
 line-height: 0;
 background: none;
  

  -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.navi li:hover  ul li {
 border-bottom:1px dotted #006633;
 height:42px;
}

.navi li:hover ul li:last-child{
 border-bottom:0;
 margin-bottom:10px;
}

.navi li ul li a {
 margin:0;
 text-align:center;
 background: #0066cc;
 padding:10px 20px;
 line-height:22px;
 border:0;
 color:#FFF;
 
}
.navi li ul li a:hover {
 background: #0099ff;
}
</style>​ 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

질답게 or 의뢰게
네...충고 감사합니다.

게시글 목록

번호 제목
8050
8048
19969
19968
19967
19966
19965
19964
19963
19962
19961
28345
31017
19960
19959
19958
19957
8039
8035
8029
28344
28339
8019
28338
8017
8010
8007
8004
8003
28332
28322
7999
28317
20956
7992
20945
28314
20936
20931
7986
20925
7982
7979
7978
7975
28307
7973
7966
28305
7963
28300
7961
28297
28295
7959
19948
19947
28292
31016
19946
19945
28286
7958
7956
7952
7946
28285
28283
19943
7944
7936
7931
28279
24666
24663
7928
7923
19941
28274
28257
28249
28248
7914
7912
7911
20912
7908
31755
28233
28232
28228
7903
28217
20900
24662
20891
20882
19936
20853
31011