您可以查看我在此处工作的页面：
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个像素。基本上在第一个＆＃34;测试菜单＆＃34;之上有很多白色。每个下拉菜单中的选项，我试图最小化该空白区域。如何将其提高5px，然后让蓝色导航栏重叠？
问题＃2：当鼠标悬停在选项上时，您还会注意到在每个下拉菜单的右侧，您看起来是右侧的粗边框 - 至少比我设置的1px厚。导致这种情况发生的原因是什么？
问题＃3：在＆＃34; SEO仪表板的右侧＆＃34;链接你注意到你悬停和解锁后右边框会消失。我怎样才能解决这个问题呢？
答案 0 :(得分：0)
问题＃1：在以下ul元素中：
<ul style="padding: 0;margin-top: 5px !important;" id="treemenu1">
将以下CSS添加到该元素：
margin-top: 5px;
问题＃2：在style.css的第103行，你有一个右边的声明
问题＃3：修复问题＃2也将解决此问题
答案 1 :(得分：0)
问题＃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）。