드롭다운 메뉴 질문
본문
아래의 메뉴를 만들었는데 글자는나오는데 메뉴 모양이랑 이런게 안나옵니다.
왜 그런거죠? ㅜㅜ
<style type="text/css">
body, div, ul, li{margin:0; padding:0}
body, div, ul, li{margin:0; padding:0}
body{font-size:12px; font-family:"굴림", arial}
ul{list-style:none}
a{color:#000; text-decoration:none}
a{color:#000; text-decoration:none}
.gnb{
width:875px; height:34px; margin:auto; margin-top:0px;
}
width:875px; height:34px; margin:auto; margin-top:0px;
}
/* 메인메뉴 영역 */
.gnb>ul{
width:875px; height:34px; background:#ccc;
padding:0px 0 0 0px;
}
/* 주메뉴부분 */
.gnb>ul>li{
float:left; width:123px; height:34px; margin-right:2px;
position:relative;
}
.gnb>ul{
width:875px; height:34px; background:#ccc;
padding:0px 0 0 0px;
}
/* 주메뉴부분 */
.gnb>ul>li{
float:left; width:123px; height:34px; margin-right:2px;
position:relative;
}
.gnb>ul>li>a{
display:block; width:100%; height:100%;
font:bold 12px/30px "맑은 고딕", arial;
text-align:center; color:#fff; background:#595e61;
}
display:block; width:100%; height:100%;
font:bold 12px/30px "맑은 고딕", arial;
text-align:center; color:#fff; background:#595e61;
}
.gnb ul li a:hover{color:#fff; background:#fa69a6}
/* 서브메뉴 영역*/
.gnb ul ul{display:none}
.gnb>ul>li:hover ul{
display:block; width:123px; height:34px;
position:absolute; left:0; top:34px;
}
display:block; width:123px; height:34px;
position:absolute; left:0; top:34px;
}
.gnb li li{width:123px; height:34px; background-color:#ebe9e9; text-align:center;}
.gnb li li a{
display:block; width:100%; height:100%;
font:bold 12px/25px "맑은 고딕", arial;
}
display:block; width:100%; height:100%;
font:bold 12px/25px "맑은 고딕", arial;
}
.gnb li li a:hover{
color:#fa69a6; background:none;
}
</style>
color:#fa69a6; background:none;
}
</style>
<div class="gnb">
<ul>
<li><a href="#">웹악어새</a>
<ul>
<li><a href="../bbs/board.php?bo_table=intro">웹악어새란?</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
</ul>
</div>
답변 1
> 이것을 공백으로 바뀌세요.
안녕하세요 댓글 감사드립니다. >이것을 공백으로 바꾸란말이 무슨말씀이신지 ㅜㅜ 좀 알려주세요 ㅜㅜ
<style type="text/css">과 </style>사이에 보시면
gnb>ul>li{ 이런식으로 ">"표시 대신 공백이 있어야 하는 곳인것 같은데 ">"이 표시가 잘못 들어간것 같은데요~
그래서 ">"이것을 공백으로 바꾸시라는 뜻인듯요...^^
gnb>ul>li{ => gnb ul li{
답변을 작성하시기 전에 로그인 해주세요.
