gnb 오류 질문
본문
<li class="mainli5"> <!--mainli5-->
<a href="#">화장품</a>
<table class="gnb_table05" style="width:0; border:0;" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="" class="gnb_box05" valign="top">
<dl class="sub sub_ul5">
<dt><a href="#">ㅇㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</td>
<td>
<dl class="sub sub_ul5">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</br>
<dl class="sub sub_ul5" style="padding-top: 45px;">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</td>
<td>
<dl class="sub sub_ul5">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
<dl class="sub sub_ul5" style="padding-top: 45px;">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</td>
<td>
<dl class="sub sub_ul5">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</br>
<dl class="sub sub_ul5" style="padding-top: 45px;">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</td>
<td>
<dl class="sub sub_ul5">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
<dl class="sub sub_ul5">
<dt><a href="#">ㅇㅇ</a></dt>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
<dd><a href="#">ㅇㅇ</a></dd>
</dl>
</td>
</tr>
</table>
</li> <!--mainli5-->
#gnb {width:100%; height:35px;
margin: 0 auto; padding: 0;
background-color: #0074A4;}
.gnb_01{z-index: 9990;
position:relative;
background-color:#0074A4;
width:1098px; height: 35px; margin: 0 auto;}
.gnb_01 li{display:inline-block;
zoom:1px;
width:151px;
height: 35px;
line-height:35px;
text-align:center;
font-size: 14px;
font-weight: bold;}
.gnb_01 li a{display: block;
background-color:#0074A4;
width:156px; height: 35px;
color: #FFF;
font-weight: bold;
font-size: 14px;
line-height:35px;
padding-left: 5px; }
.gnb_01 li a:hover{color:#80BE25; }
.gnb_01 li .sub{font-weight: none;
width:140px;
text-align: center;
background-color:green;
padding: 10px 0 15px 0;}
.gnb_01 li .sub a{background-color:#fff;
color:#333;
font-size:12px;
height: 35px;
text-align:left;
font-weight: 100;
width:130px;
padding-left: 10px;
border:1px solid red;}
.gnb_01 li .sub dt a{font-weight:bold;
color: #333; font-size: 12px;}
.gnb_01 li .sub dt a:hover{text-decoration: underline;}
.sub {}
.sub{display: none;}/*숨김*/
.gnb_table02 , .gnb_table05 {/*margin-left: 25px; */
background-color:none;/*none*/ }
.sub dd a:hover{color:#80BE25; text-decoration: underline;}
.gnb_table01 , .gnb_table02 , .gnb_table03 ,
.gnb_table04 , .gnb_table05 {background-color:orange;
position:absolute;
display:inline-block; }
.gnb_table04 {left:260px;
/*border-right:none !important;*/}
.gnb_table05 {left:400px;}
gnb 아래에 주황색으로 저렇게 내려오는데 어떤걸 수정해야하나요?
확인 해 보니까 화장품카테고리에서 내려오는 건데
display를 하면 아예 중메뉴가 안나와버리고
width값을 없애면 네모박스모양으로 메뉴가 안생겨서 미워지네요 ..ㅠ
답변 1
ul, li, dl, dt, dd 등 기본 margin, padding 초기화 하였나요?
html,body{width:100%;height:100%;}
html{overflow-y:scroll}
body,th,td,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,select,button{font-family:dotum,Helvetica,sans-serif;font-size:12px;color:#000}
body{text-align:center;*word-break:break-all;-ms-word-break:break-all}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:middle}
img{vertical-align:top}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0}
a{color:#2f3743;text-decoration:none}
a:hover{color:#390;text-decoration:underline}
button *{position:relative}
button img{left:-3px;*left:auto}
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
hr{display:none}
legend{*width:0}
table{border-collapse:collapse;border-spacing:0}
