가로메뉴 만들기 및 스크롤 지우기

html

---

<div class="box"> <div id="tab"> <ul> <li><a href="#">tab1</a></li> <li><a href="#">tab2</a></li> <li><a href="#">tab3</a></li> <li><a href="#">tab4</a></li> <li><a href="#">tab5</a></li> <li><a href="#">tab6</a></li> <li><a href="#">tab6</a></li> <li><a href="#">tab7</a></li> <li><a href="#">tab8</a></li> <li><a href="#">tab9</a></li> <li><a href="#">tab10</a></li> </ul> </div> </div>

 

 

css

---

*{margin:0; padding:0;} ul{list-style:none;} a{text-decoration:none; color:inherit;} .box{max-width:960px; width:100%; height:800px; border:1px solid #ccc; margin:0 auto; } #tab ul{white-space:nowrap; overflow-x: auto; text-align:center scrollbar-width: none; -ms-overflow-style: none; }      ul::-webkit-scrollbar {display: none;}} #tab ul li{display:inline-block; padding: 10px 20px; background: #ccc; margin-right:10px; }

 

 

이번에 사용한 수정본

---

html -

<div class="topmenu">
<div class="nav">
  <div id="navmenu">
 <nav class="navgnb">
                <ul class="<!--@if($li->use_menu_bt)-->no_1depth<!--@end-->">
                <li loop="$gnb->list=>$key,$val" class="<!--@if($val['expand'] == 'N' && !$val['selected'])-->closed<!--@end--><!--@if($val['selected'])--> activetop<!--@end-->">
                    <a href="<!--@if($li->use_menu_bt)-->{$jv}<!--@else-->{$val['href']}<!--@end-->" target="_blank"|cond="$val['open_window']=='Y'">{$val['text']}</a>
                    </li>
                    </ul>
                </li>
                </ul>
            </nav>
  </div>
</div>
 </div>

 

css -

*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none; color:inherit;}
.nav{max-width:960px; border:1px solid #d1d8e4; margin:0 auto;}

.nav li a, .activetop>a {}
.nav ul li ul li ul li, .activetop>a    {color: red; border-bottom: 2px solid red; font-weight: 600;}

#navmenu ul{white-space:nowrap; overflow-x: auto; text-align:left; scrollbar-width: none; -ms-overflow-style: none; }
         ul::-webkit-scrollbar {display: none;}

#navmenu ul li{display:inline-block; padding: 20px 12px; background: #fff; margin-left:0px;}