Question

我有一个嵌套在div中的ul导航链接，而div又嵌套在'header'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 { display: inline-block; }：使列表项水平放置，而不是像正常那样堆叠在列中
.header ul ul li { display: block; }：不是为了子菜单。仍然想要那些堆叠。
.header ul ul { display: none; }：不显示嵌套列表......
.header li:hover ul { display: block; }：...直到我们将鼠标悬停在父
.header li:hover ul { position: absolute; }：绑定到最近的非静态定位祖先
.header li { position: relative; top: 0; left: 0; }：由于这种诡计，这是它的父母。即使您没有移动到任何地方或某些浏览器会忽略您，请务必指定顶部和左侧。

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

当浏览器窗口调整大小时，导航不会保留在父div中

1 个答案: