html - 菜单栏在窗口调整大小时推过 div 暴露其后面的区域

Question

我有一个带有菜单栏、横幅 (div) 和主要部分(容器 div)的网页。当窗口调整大小(变小)时，菜单栏会超出窗口的可见区域，这会触发水平滚动条。但是，如果我随后在调整大小的窗口中向右滚动，横幅和容器将保留在原处，并且网站的背景会暴露出来。

我现在还为菜单栏启用了最小宽度，因为我不希望菜单栏在调整大小时以困惑的方式折叠到下一个可用行。

有没有办法让栏在调整大小时以有组织的方式折叠，例如:第一行有 4 个 block ，第二行有 3 个 block 。或者关于如何在调整大小时处理菜单栏的任何其他建议？

我也很难将菜单栏正确居中。

这是包含 html 和 css 相关部分的页面的 jsfiddle。 http://jsfiddle.net/dj99aq6e/

 <div id="dtitle">
   <h2 id="title">Title</h2>
 </div>

菜单栏的一段代码:

<!--menu bar STARTS -->

<ul id="sddm">
 <li><a href="" 
    onmouseover="mopen('m1')" 
    onmouseout="mclosetime()">test</a>
 </li>

CSS:

body{
font-family: sans-serif;
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .2); 
margin:0;
padding:0;
height:100%;
width:100%;
overflow-x: auto;
}

html{
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow:hidden;
}

#dtitle{
background-color:black;
padding:0;
height:8%;
width:100%;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}

#sddm{
display:table;
margin:10px auto;
margin-bottom: 2px;
padding-left: 0;
min-width: 1050px;
z-index:30;
}


#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font:14px sans-serif
}

#sddm li a{
display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 128px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}


#sddm li a:hover{
background: #49A3FF}

#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}


#sddm div a
{   position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 12px sans-serif
}

#sddm div a:hover
{   background: #49A3FF;
    color: #FFF}

Answer 1

这是你想要的吗？ http://jsfiddle.net/dj99aq6e/1/

我从#dtitle 中取出overflow: hidden 并用padding 调整文本

#dtitle{
    background-color:black;
    padding:0;
    padding-top: 5px;
    margin-top: -15px;
    height:8%;
    width:100%;

    border:solid;
    border-color: gray;
    border-width:0 0 5px 0;
    min-height: 60px;
}