如何在不弄乱其余代码的情况下创建下拉菜单？

Question

我知道这个问题可能已经问过一百万遍了，但是我似乎找不到适合我的实际情况或代码的答案或解决方案。 （如果有一个，请链接我！）

我只是想在水平导航上创建一个简单的下拉菜单，该菜单的徽标图像以两侧的链接为中心。 我确实安装了bootstrap，但是似乎无法找到一种简单的方法来使用他们的框架对其进行编码，因此我说要拧紧它并从头开始构建它。

它不一定必须是纯正的html / css，但是我对js（仍在学习）不是很熟悉。

这是我当前的代码：

 #header { height: 40px; position: relative; margin: 80px auto 0; } #header ul { margin: 0 auto; width: 800px; padding: 0; list-style: none; } #header ul li { float: left; width: 97px; } #header ul li:nth-of-type(4) { margin-left: 217px; } #header ul li a { text-transform: lowercase; text-decoration: none; display: block; text-align: center; padding: 12px 0 0 0; height: 28px; color: #000; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #header ul li a:hover { color: #c4c4c4; } .logo { position: absolute; left: 50%; margin: -60px 0 0 -124px; } @media screen and (max-width: 800px) { .logo { bottom: 100%; } #header ul li:nth-of-type(4) { margin-left: 0; } #header ul { width: 600px; position: relative; } } 

 <div id="header"> <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="Whatever Photography" height="140" width="230" /></a> <ul> <li><a href="">About</a></li> <li><a href="">Galleries <span class="caret"></span></a></li> <ul class="sub-menu"> <!--if you comment out the sub-menu, you'll see the navigation as I want it to look--> <li><a href="">Portraits</a></li> <li><a href="">Landscapes</a></li> <li><a href="">Personal</a></li> </ul> <li><a href="">Blog</a></li> <li><a href="">Info/Rates</a></li> <li><a href="">Prints</a></li> <li><a href="">Contact</a></li> </ul> </div> 

我遇到的另一个问题是，当我将视口调整为移动大小时，徽标图像移到导航链接的顶部，而其中的一半隐藏在视线之外。 虽然那是一个完全独立的问题...

Answer 1

我修改了您的代码，您可以尝试这样的事情。

 #header { height: 40px; position: relative; margin: 80px auto 0; } #header ul { margin: 0 auto; width: 800px; padding: 0; list-style: none; } #header ul li { float: left; width: 97px; } #header ul li:nth-of-type(4) { margin-left: 217px; } #header ul li a { text-transform: lowercase; text-decoration: none; display: block; text-align: center; padding: 12px 0 0 0; height: 28px; color: #000; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #header ul li a:hover { color: #c4c4c4; } .logo { position: absolute; left: 50%; margin: -60px 0 0 -124px; } @media screen and (max-width: 800px) { .logo { bottom: 100%; } #header ul li:nth-of-type(4) { margin-left: 0; } #header ul { width: 600px; position: relative; } ul.sub-menu { display: none; position: absolute; top: 0; left: 0; width: auto!important; overflow: hidden; padding: 0 1em; z-index: 2; background: white; } .sub-menu li { display: block; float: none!important; } .more { position: relative; } .more:hover .sub-menu { display: inline-block; } 

 <div id="header"> <ul> <li><a href="">About</a></li> <li class="more"><a href="">Galleries <span class="caret"></span></a> <ul class="sub-menu"> <li><a href="">Portraits</a></li> <li><a href="">Landscapes</a></li> <li><a href="">Personal</a></li> </ul> </li> <li><a href="">Blog</a></li> <li> <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="Whatever Photography" height="140" width="230" /></a></li> <li><a href="">Info/Rates</a></li> <li><a href="">Prints</a></li> <li><a href="">Contact</a></li> </ul> </div>