[초보]메뉴를 만들고 있는데 어찌해야할지...
본문
<nav>
<ul class="main_menu">
<li><a href="#">기타</a></li>
<li><a href="#">기타</a></li>
<li><a href="#">기타</a></li>
<li><a href="#">기타</a></li>
</ul>
<ul class="main_menu">
<li><a href="#">기타</a></li>
<li><a href="#">기타</a></li>
<li><a href="#">기타</a></li>
<li><a href="#">기타</a></li>
</ul>
</nav>
=========================================================
스타일은
.main_menu li { float: left; width: 25%; height: 25px; text-align: center; list-style-type: none; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: #CCC; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #999; border-right-color: #999; border-bottom-color: #999; border-left-color: #999; }
.main_menu li a {
text-decoration: none;
color: #690;
border-bottom: 0px double #000000;
.main_menu li a {
text-decoration: none;
color: #690;
border-bottom: 0px double #000000;
이렇게 했는데... 25%씩 네개의 메뉴는 만들었는데 말입니다.. ;;;
네이버 처럼 메뉴를 클릭하면 클릭한 메뉴 밑에 밑줄 나오게 할려면 어떻게 해야 할지 감이 안잡히네요
네이버 모바일 처럼말이죠~
도와주세요~
답변 2
<nav>
<ul class="main_menu">
<li <? if ($bo_table == "기타1") echo "class='selected'";?>><a href="#">기타1</a></li>
<li <? if ($bo_table == "기타2") echo "class='selected'";?>><a href="#">기타2</a></li>
<li <? if ($bo_table == "기타3") echo "class='selected'";?>><a href="#">기타3</a></li>
<li <? if ($bo_table == "기타4") echo "class='selected'";?>><a href="#">기타4</a></li>
</ul>
<ul class="main_menu">
<li <? if ($bo_table == "기타1") echo "class='selected'";?>><a href="#">기타1</a></li>
<li <? if ($bo_table == "기타2") echo "class='selected'";?>><a href="#">기타2</a></li>
<li <? if ($bo_table == "기타3") echo "class='selected'";?>><a href="#">기타3</a></li>
<li <? if ($bo_table == "기타4") echo "class='selected'";?>><a href="#">기타4</a></li>
</ul>
</nav>
=========================================================
스타일은
.main_menu li { float: left; width: 25%; height: 25px; text-align: center; list-style-type: none; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: #CCC; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #999; border-right-color: #999; border-bottom-color: #999; border-left-color: #999; }
.main_menu li { text-decoration: none; color: #690; border-bottom: 0px double #000000;}
.main_menu li { text-decoration: none; color: #690; border-bottom: 0px double #000000;}
.main_menu li.selected{ text-decoration: underline;}
많은 도움이 되었습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
