处理导航栏的溢出

Question

I'm trying to create a website main navigation bar (ideally using only css). I am having trouble dealing with the overflow of links at smaller screen resolutions.

I'm wondering if someone could provide some suggestions for a better way to handle the menu at smaller screen resolutions.

The natural behaviour of the links is to start on a new line so I tried increasing the height of the bar at a smaller media query.

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

Get rid of BOTH the height:60px AND the @media query height:120px.

The nav div will then automatically be just as tall as it needs for however many rows of links need to wrap at any given moment.