Question

我正在尝试创建网站主导航栏（理想情况下仅使用CSS）。我在处理较小屏幕分辨率的链接时遇到麻烦。

我想知道是否有人可以提供一些建议，以更好的方式在较小的屏幕分辨率下处理菜单。

链接的自然行为是从新的一行开始，因此我尝试在较小的媒体查询中增加栏的高度。

nav, ul, li, a {
    padding: 0 0;
    margin: 0 0
}

nav.navibar {
    width: 100%;
    float: left;
    background-color: #283035;
    height: 60px;
    text-decoration: none;
    white-space: nowrap;
}

nav.navibar .active{
    background-color: #E74310; 
}

ul.navilink{
    list-style:none;
    font-weight:bold;
    margin-bottom: 0;  
    float:left;
    position:relative;
    z-index:5;
}

ul.navilink li{
    float:left;
    position:relative;
}

ul.navilink a{
    display:block;
    padding: 15px 15px;
    color:#ffffff !important;
    text-decoration:none;
    cursor: pointer;
    font-size: 21px;
    font-family: Raleway, Helvetica, "Trebuchet MS", sans-serif;
    text-align: center;
    line-height: 30px;
    /*min-width: 150px;*/
    transition: all 0.3s ease;
}

ul.navilink a:hover{
    background-color: #000;
    color:#fff;
    text-decoration:none;
}

/*--- DROPDOWN ---*/
ul.navilink ul,
ul.navilink li:hover ul li ul{
    list-style:none;
    position:absolute;
    display: none; 
}
ul.navilink ul li{
    padding-top: 0px; 
    float:none;
}

ul.navilink ul a{
    white-space:nowrap; 
    font-size: 16px;
    text-align: left;
}

ul.navilink li:hover ul {
    display: block;
    left: 0;
    z-index: 2147483647;
}

ul.navilink li ul li:hover ul {
    display: block;
    top: 0;
    left:100%; 
    z-index: 2147483647;
}

ul.navilink li:hover a{
    background:#000 !important;
    text-decoration:none;
}

ul.navilink li:hover ul a{
    text-decoration:none;
}

ul.navilink li:hover ul li a:hover{
    background:#f05221 !important;
}

@media only screen and (max-width: 1100px) {
    nav.navibar {
        height: 120px;
        /*overflow: auto;*/
    }
}


<nav class="navibar">
<ul class="navilink">
    <li><a class="active" href="logout">Logout</a></li>
    <li><a>General</a>
        <ul>
            <li><a href="po_search">PO Search</a></li>
        </ul>
    </li>
    <li><a>Inventory</a>
        <ul>
            <li><a href="grazing_rep">Grazing Report</a></li>
            <li><a>PI Checks</a>
                <ul>
                    <li><a href="batch_rotat">Batch Rotation</a></li>
                    <li><a href="dynamic_pi">Dynamic PI Variance</a></li>
                    <li><a href="pi_query_ch">Queries Check</a></li>
                    <li><a href="wrong_check">Wrong Item Checks</a></li>
                </ul>
            </li>
            <li><a>QC Inbound</a>
                <ul>
                    <li><a href="qc_error_ch">QC Error Checks</a></li>
                    <li><a href="qc_process">QC Process</a></li>
                    <li><a href="qc_putaway">QC Putaway</a></li>
                    <li><a href="qc_inbound">QC Stats</a></li>
                    <li><a href="qc_targeted">QC Targeted</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</nav>

Answer 1

摆脱高度：60px和@media查询高度：120px。

然后，导航div会自动达到所需的高度，但是在任何给定时刻需要包装许多行链接。

处理导航栏溢出

1 个答案: