修复导航栏'的下拉菜单
Fixing navigation bar's dropdown menu
您可以在这里查看我正在处理的页面：
http://www.privateservercloud.com/
以下是正在使用的CSS文件的链接：http://www.privateservercloud.com/style.css
以下是HTML的代码：
<div class="navbar whmcscontainer" style="margin-top:10px;">
<div class="nav-collapse collapse">
<div class="menu" style="text-align: center;">
<ul style="padding: 0;" id="treemenu1">
<ul class="nav" style="width:158px">
<li><a href="#">SEO Dashboard</a>
<ul style="margin-left:-1px;width:152px;">
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
</ul>
</li>
</ul>
<ul class="nav" style="width:186px">
<li><a href="#">Manage Campaigns</a>
<ul style="margin-left:-1px;width:180px;">
<li style="width:180px"><a href="test.php"><span style="width:180px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:180px"><a href="test.php"><span style="width:180px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:180px"><a href="test.php"><span style="width:180px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:180px"><a href="test.php"><span style="width:180px; margin-left:5px;">Test Menu</span></a></li>
</ul>
</li>
</ul>
<ul class="nav" style="width:175px">
<li><a href="#">Reporting System</a>
<ul style="margin-left:-1px;width:169px;">
<li style="width:169px"><a href="test.php"><span style="width:169px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:169px"><a href="test.php"><span style="width:169px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:169px"><a href="test.php"><span style="width:169px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:169px"><a href="test.php"><span style="width:169px; margin-left:5px;">Test Menu</span></a></li>
</ul>
</li>
</ul>
<ul class="nav" style="width:165px">
<li><a href="#">General Settings</a>
<ul style="margin-left:-1px;width:159px;">
<li style="width:159px"><a href="test.php"><span style="width:159px; margin-left:5px;padding:8px 0 6px 4px;">Test Menu</span></a></li>
<li style="width:159px"><a href="test.php"><span style="width:159px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:159px"><a href="test.php"><span style="width:159px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:159px"><a href="test.php"><span style="width:159px; margin-left:5px;">Test Menu</span></a></li>
</ul>
</li>
</ul>
<ul class="nav" style="width:158px">
<li><a href="#">Support Center</a>
<ul style="margin-left:-1px;width:152px;">
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:152px"><a href="test.php"><span style="width:152px; margin-left:5px;">Test Menu</span></a></li>
</ul>
</li>
</ul>
<ul class="nav" style="width:159px">
<li style="border-right:0;"><a href="#">Account Details</a>
<ul style="margin-left:-1px;width:153px;">
<li style="width:153px"><a href="test.php"><span style="width:153px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:153px"><a href="test.php"><span style="width:153px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:153px"><a href="test.php"><span style="width:153px; margin-left:5px;">Test Menu</span></a></li>
<li style="width:153px"><a href="test.php"><span style="width:153px; margin-left:5px;">Test Menu</span></a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
以下是Javascript的代码：
// JavaScript Document
var menuids=["treemenu1"]
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left="0px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
以下是CSS的代码：
.navbar {
position:relative;
background:#2FA4E7;
background-image:linear-gradient(tobottom,rgba(255,255,255,.2), rgba(251,253,255,0) 78% rgba(250,253,255,0));
-moz-box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 -3px 3px rgba(1,2,2,.11), inset 0 0 0 1px rgba(0,0,0,.35);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 -3px 3px rgba(1,2,2,.11), inset 0 0 0 1px rgba(0,0,0,.35);
box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 -3px 3px rgba(1,2,2,.11), inset 0 0 0 1px rgba(0,0,0,.35);
font-size:110%;
margin-bottom:15px;
font-weight:bold;
}
.navbar .nav {
position:relative;
left:0;
list-style:none;
padding:0;
float:left;
margin:0;
}
.navbar .nav > li > a {
display:block;
padding:15px 23px;
color:#fff;
text-decoration:none;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
visibility: visible;
}
.navbar .nav > li > a:hover {
color:#ffffff;
text-decoration:none;
background-color:transparent;
}
.navbar li {
border-left:1px solid rgba(255,255,255,.05);
border-right:1px solid rgba(0,0,0,.2);
}
.nav-collapse .nav li a:hover {
background:url(images/hover.png)!important;
}
#whmcscontent .whmcscontainer {
background:#fff;
border:1px solid #ccc;
-moz-box-shadow:0 0 2px rgba(0,0,0,.1);
-webkit-box-shadow:0 0 2px rgba(0,0,0,.1);
box-shadow:0 0 2px rgba(0,0,0,.1);
clear:both;
}
.menu ul li ul li a {
background: none repeat scroll 0 0 #ffffff !important;
padding: 0 !important;
}
.menu ul li ul {
background: none repeat scroll 0 0 #ffffff !important;
border: 1px solid #cfcfcf;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
float: left;
height: auto;
left: 0 !important;
margin: 0;
padding: 5px 0 10px 6px;
position: absolute;
top: 51px !important;
visibility: hidden;
width: 218px;
z-index: 999;
}
.menu ul li ul li {
background: url("images/nav_link.gif") no-repeat scroll left 14px rgba(0, 0, 0, 0);
border-bottom: 1px solid #eaecf2;
float: left;
position: relative;
width: 200px;
list-style-type: none;
}
.menu ul li ul li a span {
color: #516594;
cursor: pointer;
display: block;
float: none;
font: 15px Arial,Helvetica,sans-serif;
height: auto;
padding: 8px 0 6px 4px;
text-decoration: none;
width: 200px;
text-align: left;
}
.menu ul li ul li a:hover span {
padding: 8px 0 6px 4px;
text-decoration: underline;
}
现在我正在处理一些问题，如果能提供任何帮助，我将不胜感激：
问题1:我需要将每个下拉菜单提高大约5倍。基本上，每个下拉菜单中的第一个"测试菜单"选项上方都有很多白色，我正试图将白色空间进一步最小化。我怎么能把它提高5倍，然后让蓝色导航栏重叠它？
问题2:将鼠标悬停在选项上时，您还会注意到，在每个下拉菜单的右侧，您的右侧似乎有一个较厚的边框，至少比我设置的1px要厚。是什么原因导致了这种情况？
第3期：在"SEO Dashboard"链接的右侧，您会注意到悬停并取消覆盖后，右侧边框会逐渐消失。我该如何修复它，使其保持不变？
问题#1:第123行：
.menu ul li ul {
/* ... */
padding: 0px 0 10px 6px; /* decreases top space above the first "Test Menu" */
top: 100% !important; /* brings the menu flush with the blue nav bar */
/* ... */
}
问题2:它是由以下原因引起的。它看起来很厚，因为有两个1px的边界：<ul>上的边界和<li>上的边界。问题3的解决方案也解决了这个问题。
.navbar li {
border-right: 1px solid rgba(0,0,0,.2);
}
问题#3：我不知道为什么在你解开后边界会消失，但一个简单的解决办法是移动以下行：
border-left: 1px solid rgba(255,255,255,.05);
border-right: 1px solid rgba(0,0,0,.2);
从.navbar li到.navbar .nav > li > a。这是更好的做法，因为<li>是弹出窗口的父级，而a是同级，因此其边界不会干扰弹出窗口（问题#2的原因）。
问题#1:在以下ul元素中：
<ul style="padding: 0;margin-top: 5px !important;" id="treemenu1">
在该元素中添加以下CSS：
margin-top: 5px;
问题2：在style.css的第103行，您有一个边界权限声明
问题#3：修复上面的问题#2也会修复这个问题
相关文章：
- jQuery侧导航下拉菜单
- jQuery导航下拉菜单未显示..任何想法
- 使用触摸启动导航下拉菜单，以实现 IOS 功能
- 下拉菜单获胜'不要出现在导航栏上
- 如何使用引导程序显示另一个导航栏而不是下拉菜单
- 侧导航栏下拉菜单
- JavaScript:列表项中的导航栏下拉菜单
- 隐藏在导航栏中的下拉菜单
- 下拉菜单溢出在引导导航栏内不起作用
- 引导导航下拉菜单不起作用
- 如何创建具有下拉菜单的完整长度导航菜单
- 第四模式阻止导航栏下拉菜单正常工作
- 导航栏中的引导下拉菜单不起作用
- 修复导航栏'的下拉菜单
- 引导程序导航栏折叠下拉菜单
- 从引导导航栏下拉菜单导航到角度页面模板
- 使用JQuery导航到下拉菜单上有选择的页面
- 引导程序3-导航栏下拉菜单后，单击使背景变暗
- CSS-需要帮助弄清楚我的下拉菜单导航哪里出了问题
- 当Twitter引导下拉菜单导航菜单完成其操作时，调整一些CSS
