CSS질문 좀 드려요~ 1픽셀 라인의 행방
본문
질문 좀 드립니다.메뉴 상 하 자리에 1 픽셀짜리 라인을 넣었는데요
위쪽라인은 나오는데 아래쪽라인은 먹혀버렸는지 어떻게 된건지 출력이 안됩니다.
계속 봐도 뭐가 문제인지모르겠네요.
아시는 분 답 좀 부탁드립니다
<div id="hd_wrapper">
<div id="logo">
<a href="/"><img src="/images/logo.jpg"></a>
</div>
<div id="top_tel">
<img src="/images/top_tel.gif"></a>
</div>
<div id="top_menu">
<div class="menu_line"></div> <--라인
<ul>
<li><img src="/images/brand.jpg" border="0"></li>
<li><a href="/coway/shop/list.php?ca_id=10"><img src="/images/menu01.jpg" border="0"></a>
<ul>
<li><a href="/coway/shop/list.php?ca_id=1010">하위메뉴1</a></li>
<li><a href="/coway/shop/list.php?ca_id=1020">하위메뉴2</a></li>
<li><a href="/coway/shop/list.php?ca_id=1030">하위메뉴3</a></li>
<li><a href="/coway/shop/list.php?ca_id=1040">하위메뉴4</a></li>
</ul>
</li>
<li><a href="/coway/shop/list.php?ca_id=20"><img src="/images/menu02.jpg" border="0"></a></li>
<li><a href="/coway/shop/list.php?ca_id=3010"><img src="/images/menu03.jpg" border="0"></a></li>
<li><a href="/coway/shop/list.php?ca_id=3020"><img src="/images/menu04.jpg" border="0"></a></li>
<li><a href="/coway/shop/list.php?ca_id=40"><img src="/images/menu05.jpg" border="0"></a></li>
<li><a href="/coway/shop/list.php?ca_id=50"><img src="/images/menu06.jpg" border="0"></a></li>
<li><a href="/coway/shop/list.php?ca_id=60"><img src="/images/menu07.jpg" border="0"></a></li>
</ul>
<div class="menu_line"></div> <--라인, 이게 출력이 안됩니다.
</div>
</div>
<div id="main_b">
<?php include(G5_SHOP_SKIN_PATH.'/boxtodayview.skin.php'); // 오늘 본 상품 ?>
<img src="/images/main_12.jpg">
</div>
#hd_wrapper {position:relative;margin:0 auto; width:1024px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#logo {float:left;padding:10px 0 0 0}
#top_tel {float:right;padding:0}
#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; z-index:100; left:139px; top:220px;}
#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;}
#main_b {position:relative;margin:0 auto; width:1024px;zoom:1}
#main_b:after {display:block;visibility:hidden;clear:both;content:""}
답변 2
#top_menu {float:left;padding:0 ; width:1024px;} 이 줄을
#top_menu {clear:both;padding:0 ; width:1024px;}
#top_menu:after {display:block;visibility:hidden;clear:both;content:""}
로 바꿔보세요.
#top_menu 와 #top_menu ul 에 높이(height)값을 지정해서 테스트 해보시죠.