css - 调整浏览器窗口大小时，导航不包含在父 div 中

Question

我有一个 ul 导航链接嵌套在一个 div 中，该 div 又嵌套到一个“标题”div 中。我的页眉 div 还包含一个横幅图像，它应该显示在网站的左上角，在横幅旁边我想要我的导航链接，当鼠标悬停在上面时它包含下拉菜单。

现在我将横幅向左浮动，导航链接自动显示在我桌面分辨率的横幅旁边。这种方法的问题是，一旦我调整浏览器窗口的大小，导航链接就会开始环绕横幅，看起来很糟糕。理想情况下，我希望横幅和导航链接保持在同一行，无论我的网站在何种分辨率下查看。

这是一个 jfiddle，其中包含我的网站如何显示的示例。当我以 1920x1080 的默认分辨率查看网站时，它显示正常，但当我调整大小时，它会出现一些奇怪的东西。

<!--- header div containing banner image and navigation bar --->

<div class="header">
    <a href="index.php"><img id="banner" src="img/image.png" alt="Banner image displays here"></a>   
        <div id="w">
                <nav>
                    <ul id="ddmenu">
                        <li><a href="#">About</a>
                            <ul>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">The Staff</a></li>
                                <li><a href="#">History</a></li>

                            </ul>
                        </li>
                        <li><a href="#">Services</a>
                            <ul>
                                <li><a href="#">Donations</a></li>
                                <li><a href="#">Volunteering</a></li>
                                <li><a href="#">Housing</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Links</a>
                            <ul>
                                <li><a href="#">China</a></li>
                                <li><a href="#">Japan</a></li>
                                <li><a href="#">Canada</a></li>
                                <li><a href="#">Australia</a></li>
                                <li><a href="#">South America</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.php">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
         </div>


 /* relevent css for header, banner image, and navigation */

body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; margin:0px; padding:0px;}

a:link, a:visited, a:active  {color:#FFFFFF; text-decoration: none;}
a:hover {color: #C0C0C0;  text-decoration: none;}

.header {width: 100%; margin:0;  background-color: #FFFFFF;  padding-bottom: 10px;  margin-bottom: 10px;}

#banner { float: left; max-width:100%; margin: 0; padding: 0; border: none;}
#w { max-width:50%; background-color: #FFFFFF; margin: 0; padding: 0; border: none; } 
#ddmenu {
  max-width: 50%;
  height: 68px;
  margin: 0 auto;
  padding-top: 2px;
  padding-bottom: 2px;
  background: #fff;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  color: #8aa8bd;
}


#ddmenu li { display: inline-block; float: left; font-size: 1.00em;}

#ddmenu li a {
  display: block;
  float: left;
  padding: 0 10px;
  line-height: 4.9em;
  font-weight: bold;
  text-decoration: none;
  color: #FF0000;

}
#ddmenu li:hover > a { color: #FFF; background-color: #FF0000;}

#ddmenu li:hover ul {display:  block;}


/*Fills gap between top level li and nested ul so that the above mouse hover pseudoclass   selecting ul works*/

#ddmenu > li:after {
    content: " ";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

#ddmenu ul {
  position: absolute;
  top: 80px;
  width: 120px;
  background: #fff;
  display: none;
  margin: 0;
  padding: 4px 4px;
  list-style: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}


/* tooltip arrow */
#ddmenu ul:after {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 bottom: 100%;
 left: 8px;
 border-width: 0px 8px 8px 8px;
 border-style: solid;
 border-color: #fff transparent; 

}

#ddmenu ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 4px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;  
}

#ddmenu ul li { 
display: block; 
width: 100%; 
font-size: 0.9em; 

}

#ddmenu ul li a {
 display: block;
 width: 100%;
 padding: 6px 2px;
 line-height: 1.4em;

}           

Answer 1

我删除了很多你的样式，因为有很多 CSS 需要调试，但看看 this Fiddle .我认为它显示了您想要的效果的一个更简单的示例，您可以使用 CSS。

以下是 CSS 最重要部分的分割:

• .header ul { list-style-type: none; :不显示元素符号
• .header li { 显示:内联 block ； :使列表项水平并排放置，而不是像正常情况那样堆叠在一列中
• .header ul ul li { 显示: block ； :但是不适用于子菜单。仍然想要堆栈中的那些。
• .header ul ul { 显示:无； :不显示嵌套列表...
• .header li:hover ul { 显示: block ； : ...直到我们将鼠标悬停在父对象上
• .header li:hover ul { position: absolute; :绑定(bind)到最近的非静态定位的祖先
• .header li { position:relative；顶部:0；左:0； :由于这个诡计，它是它的父级。请记住指定 top 和 left 即使您没有移动到任何地方，否则某些浏览器会忽略您。

剩下的只是绒毛，让它看起来更好一点。由于您使用 inline-block 来处理大部分效果，因此您可以免费调整大小和换行。