我的水平导航栏保持自动换行

Question

我试图制作一个水平导航栏，以使单词根据大小一直延伸到整个窗口，但是一旦它变得太小，我希望菜单项开始消失。当前正在发生的事情是菜单项被自动换行并且变得不可见，直到将光标滚动到它们上方为止。如何使菜单项消失而不是包装。

我尝试将ul：菜单中的空白：nowrap放入li菜单中，并将display：inline-block放入

。

.drop_menu{
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    width:100%;
}

.drop_menu li {
float:left;
padding-right:8%; 
padding-left:8%;
display:inline-block;
}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial,verdana,sans-serif;
}

/*Submenu*/

.drop_menu ul{
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    white-space:nowrap;
}



.drop_menu li:hover {position:relative; background:#5FD367;}

.drop_menu li:hover ul{
    left:0px;
    top:30px;
    background:#5fd367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5fd367;
}
.drop_menu li:hover ul li a:hover{background:#005555;}

我希望菜单项会随着窗口的缩小而从页面中删除，但是它变得不可见并且在下面自动换行。