Как убедиться, что горизонтальное подменю выровнено по экрану? - PullRequest
Новая
       31

Как убедиться, что горизонтальное подменю выровнено по экрану?

0 голосов
/ 10 января 2020 

.wrap_nav_menu { width: 980px; margin: 0 auto; position: absolute; top: 40px; left: 50%; margin-left: -490px; }
.nav_menu { position: relative; height: 220px; }
.nav_wrap { padding-top: 80px; transform: none !important;float: right;  }
.nav_item { padding-left:40px; float: left; }
.nav_item > a { display: block; height: 70px; ) 0 0 no-repeat; overflow: hidden; }
.nav_item.home { position: absolute; top: 28px; left: 0; }
.nav_item.home > a { width: 179px; height: 168px; opacity: 1; background: transparent url(//image.genie.co.kr/imageg/web/promo_2019/0813/logo.png) 0 0 no-repeat; }


.sub_menu { display: none;  }
.nav_wrap li:hover .sub_menu, .nav_wrap li > .is_active + .sub_menu, .nav_wrap li:hover .sub_menu, .nav_wrap li > .is_active + .sub_menu { display: block; }
.nav_wrap li{ position: relative; }
.nav_wrap li .sub_menu { position: absolute; width:980px;  float: left; overflow: hidden;margin-top: -10px; margin: 0 auto;}
.nav_wrap li .sub_menu > a { float: left; height: 33px; padding-right:15px; overflow: hidden; margin:0 auto;}
<div class="wrap_nav_menu">
    <div class="nav_menu" id="naviMenu">
        <nav>
            <ul class="nav_wrap swiper-no-swiping">
                <li class="nav_item home"><a href="#" data-pg="0" class="is_active">홈</a></li>
                <li class="nav_item introduce">
                    <a href="#" data-pg="introduce">프로그램</a>

                    <div class="sub_menu">
                        <a href="#" class="s1" onclick="openTab(event, 'team1', 'group');">프로그램 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                        <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                    </div>
                </li>
                <li class="nav_item lineup"><a href="#" data-pg="lineup">라인업</a>
                  <div class="sub_menu">
                      <a href="#" class="s1" onclick="openTab(event, 'team1', 'group');">프로그램 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                  </div></li>
                <li class="nav_item application"><a href="#" data-pg="application">방청신청</a>
                  <div class="sub_menu">
                      <a href="#" class="s1" onclick="openTab(event, 'team1', 'group');">프로그램 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                  </div> </li>
                <li class="nav_item review"><a href="#" data-pg="review">다시보기</a>
                  <div class="sub_menu">
                      <a href="#" class="s1" onclick="openTab(event, 'team1', 'group');">프로그램 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                  </div></li>
                <li class="nav_item board"><a href="#" data-pg="board">공지사항</a>
                  <div class="sub_menu">
                      <a href="#" class="s1" onclick="openTab(event, 'team1', 'group');">프로그램 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                  </div></li>
                <li class="nav_item pandora"><a href="#" data-pg="pandora">팬도라</a>
                  <div class="sub_menu">
                      <a href="#" class="s1" onclick="openTab(event, 'team1', 'group');">프로그램 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                      <a href="#" class="s2" onclick="openTab(event, 'team2', 'group');">MC 소개</a>
                  </div></li>
            </ul>
        </nav>
    </div>
</div><!-- //.nav-menu -->

введите описание изображения здесь

введите описание изображения здесь введите описание изображения здесь

введите описание изображения здесь

Как настроить подменю таким образом, чтобы оно не отклонялось от рекомендаций?

В основном, Подменю начинается слева, но я хочу убедиться, что оно не отклоняется от указаний, показанных на рисунке.

...