css - Subnav 为 100% 和下拉列表的位置变化

Question

我正在尝试使用 CSS 自定义导航栏，但在弄清楚如何使子菜单的宽度达到 100% 时遇到问题。目前它似乎已修复。当没有足够的空间来显示整个

信息时，我也在尝试弄清楚如何让子菜单显示在下拉菜单的任一侧。目前，无论子菜单的大小如何，它们都显示在菜单的右侧。

我尝试在 CSS 中添加各种位置:和显示:标签。

导航栏代码:

<!-- Top menu -->
    <nav class="navbar sticky-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Brand -->
                <a class="navbar-brand" href="http://cronkflies.com"><img src="http://cronkflies.com/img/logo_2019_c_sm.png" alt="cronkflies.com logo"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="top-navbar-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="/index.php?lang=<?php echo $lang ?>" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
                            <i class="fa fa-home"></i><br>Home
                        </a>

                    </li>

                   <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
                            <i class="fa fa-paperclip"></i><br>&nbsp;&nbsp;&nbsp;<?php echo $lang_m_stats_2019  ?> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><form class="px-4 py-3">
                                <div class="form-group">
                                  <a href="#"><?php echo $lang_m_stats_year ?></a><br />
                                  <select class="js-example-basic-single js-states form-control form-control-sm" width="100px" name="jaar" id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();">
                                      <option>--Select--</option>
                                       <?php
                                                require_once($_SERVER['DOCUMENT_ROOT'].'/includes/connections/mysqli.php');

                                                $result = mysqli_query($link, "SELECT YEAR(vertrekdatum2) AS year FROM tbl_vluchtgegevens GROUP BY YEAR(vertrekdatum2) ORDER BY YEAR(vertrekdatum2) DESC ");
                                                while($row = mysqli_fetch_array($result))
                                                {
                                                    $j = $row['year'];
                                                    echo "<option value='/stats/jaar/index.php?id=$j&lang=$lang'>$j</option>";                    
                                                }mysqli_close($link);
                                                ?>
                                    </select>
                                    <script>
                                        $(function(){
                                          // bind change event to select
                                          $('#dynamic_select').bind('change', function () {
                                              var url = $(this).val(); // get selected value
                                              if (url) { // require a URL
                                                  window.location = url; // redirect
                                              }
                                              return false;
                                          });
                                        });
                                    </script>

                                </div>
                            </form></li>
                            <li>
                        <a class="dropdown-item" href="/stats/lvm/index.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airline ?></a>
                    </li>
                    <!-- Airport Stats -->
                  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#"><?php echo $lang_m_airport ?></a>
                    <ul class="dropdown-menu">
                        <li class="hover"><a class="dropdown-item" href="/stats/luchthavens/index.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airport_all ?></a></li>
                        <li><a class="dropdown-item" href="/stats/luchthavens/luchthavensbijland.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airport_land ?></a></li>
                        <li><a class="dropdown-item" href="/stats/luchthavens/aankomstcount.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airport_a ?></a></li>
                        <li><a class="dropdown-item" href="/stats/luchthavens/vertrekcount.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airport_d ?></a></li>
                        <li><a class="dropdown-item" href="/stats/luchthavens/luchthavensbij_lengte-breedtegraad.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airport_ll ?></a></li>
                        <li><a class="dropdown-item" href="/stats/luchthavens/luchthavensbij_hoogte.php?lang=<?php echo $lang ?>"><?php echo $lang_m_airport_alt ?></a></li>

                    </ul>
                  </li>

                  <!-- General Stats -->
                  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#"><?php echo $lang_m_general ?></a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/stats/overige/vluchtbijtoestel.php?lang=<?php echo $lang ?>"><?php echo $lang_m_general_aar1 ?></a></li>
                        <li><a class="dropdown-item" href="/stats/overige/vluchtbijtoestel_lvm.php?lang=<?php echo $lang ?>"><?php echo $lang_m_general_aar2 ?></a></li>
                        <li><a class="dropdown-item" href="/stats/overige/vluchtbijtoestel_lvm_2.php?lang=<?php echo $lang ?>"><?php echo $lang_m_general_aar3 ?></a></li>
                        <li><a class="dropdown-item" href="/stats/jaar/mijl_vlucht.php?lang=<?php echo $lang ?>"><?php echo $lang_m_general_mfc ?></a></li>
                        <div class="dropdown-divider"></div>
                        <li><a class="dropdown-item" href="/msp/vlucht.php?lang=<?php echo $lang ?>">MSP Heavy / Int'l Flights</a></li>
                    </ul>
                  </li>    
                </ul>

                </li>


                    <li>
                        <a href="/data/index.php?lang=<?php echo $lang ?>"><i class="far fa-list-alt"></i><br><?php echo $lang_m_flight_list ?></a>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
                            <i class="fas fa-camera-retro"></i><br>&nbsp;&nbsp;&nbsp;<?php echo $lang_m_photos ?> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a class="dropdown-item" href="/gallery/index.php?lang=<?php echo $lang ?>"><?php echo $lang_m_photos_gallery ?></a></li>
                            <li><a class="dropdown-item" href="/gallery/stats/index.php?lang=<?php echo $lang ?>"><?php echo $lang_m_photos_stats ?></a></li>
                            <li><a class="dropdown-item" href="/gallery/top_40.php?lang=<?php echo $lang ?>"><?php echo $lang_m_photos_top40 ?></a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            </div>
        </div>
    </nav>

CSS 代码:

/***** Top menu *****/

.navbar {
    margin-bottom: 0;
    background: #fff;
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
}

ul.navbar-nav {
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
}

ul.navbar-nav li a { padding: 23px 20px; background: #fff; border-top: 5px solid #fff; color: #5d5d5d; }
ul.navbar-nav li.active a { background: #f8f8f8; border-color: #3d5199; color: #5d5d5d; }

ul.navbar-nav li a:hover, ul.navbar-nav li a:focus { background: #3d5199; border-color: #3d5199; color: #fff; outline: 0; }

.nav .open > a { background: #f8f8f8; border-color: #3d5199; color: #5d5d5d; }
.nav .open > a:hover, .nav .open > a:focus { background: #3d5199; border-color: #3d5199; color: #fff; }

ul.navbar-nav li a i { line-height: 35px; color: #aaa; }
ul.navbar-nav li a:hover i, ul.navbar-nav li a:focus i { color: #fff; }

.dropdown-menu {
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, .15); box-shadow: 0 6px 10px rgba(0, 0, 0, .15);

}

.dropdown-menu > .active > a { background: #fff; color: #5d5d5d; }
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background: #f8f8f8; color: #3d5199; }

ul.navbar-nav li .dropdown-menu a { padding-top: 15px; padding-bottom: 15px; }
ul.navbar-nav li.active .dropdown-menu a { background: #fff; color: #5d5d5d; border: 0; }
ul.navbar-nav li.active .dropdown-menu a:hover, 
ul.navbar-nav li.active .dropdown-menu a:focus { background: #3d5199; color: #fff; border: 0; }

ul.navbar-nav li.active .dropdown-menu > .active > a { background: #f8f8f8; color: #3d5199; border: 0; }
ul.navbar-nav li.active .dropdown-menu > .active > a:hover, 
ul.navbar-nav li.active .dropdown-menu > .active > a:focus { background: #3d5199; color: #fff; border: 0; }

.navbar>.container .navbar-brand { margin-left: 0; }

.navbar-brand {
    /*** width: 167px; ***/
    /*** height: 106px; ***/
    background: url(../img/logo.png) left center no-repeat;
    text-indent: -99999px;
}


.dropdown-submenu {position:block;}

.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
border-bottom: 3px;
position:absolute;
width:100%;
list-style:none;
}

.dropdown-menu > li {
margin-top: 10px;
border-bottom: 3px;
color: transparent;
display:block;
width:100%;
} 

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
transform: rotate(-90deg);
width:100%;
} 

当前可以查看实时信息的测试页面是: http://cronkflies.com/test2.php航类统计菜单。

希望得到1. 子菜单是 100% 的文本2. 如果右边没有足够的窗口-将子菜单切换到菜单的左侧。

Answer 1

首先，您需要从几个地方移除相对定位。

接下来，将隐藏子菜单上的 left: auto 更改为 left: 0:

之后，您应该会在悬停时看到一个全 Angular 子菜单。