Question

我正在最难控制我的下拉菜单出现的地方！我已经完成了css并进行了更改但由于某种原因它们似乎没有反映出来。有人可能会看到我遗失的任何东西吗？

如果您将鼠标悬停在下方链接上的“联系我们”和“帮助台”标签上，您将看到我的意思。

http://krontechnology.com/dev/index_new.html

以下是下拉菜单的CSS：

.chromestyle{
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 800px;
margin: 0;
text-align: center;
padding-top: 16px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
background-color: #000000;
height: 32px;
}

.chromestyle ul li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

.chromestyle ul li a{
color: #FFFFFF;
margin: 0;
text-decoration: none;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
padding-top: 12px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #666666;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a
class of "selected" to the current active menu item*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

以下是该页面的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="images/chromestyle.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="chromejs/chrome.js"></script>
</head>
<div id="wrap">
<div id="header"></div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=7,0,19,0" width="800" height="237" title="SAP Specialists">
<param name="movie" value="SAP.swf" />
<param name="quality" value="high" />
<embed src="SAP.swf" quality="high" pluginspage="http://www.macromedia.com
/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="237">
/embed>
</object>
</div>
<div id="dropmenu">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">ABOUT US  </a></li>
<li><a href="#">THE TEAM </a></li>
<li><a href="#">POSITIONS</a></li>
<li><a href="#">QUICK FACTS </a></li>
<li><a href="#">TESTIMONIALS </a></li>  
<li><a href="#">PARTNERS </a></li>  
<li><a href="#" rel="dropmenu1">CONTACT US </a></li>    
<li><a href="#">CASE STUDIES </a></li>  
<li><a href="#" rel="dropmenu2">HELP DESK</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Locations</a>
<a href="http://www.cssdrive.com">Register</a></div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Collateral</a></div>

<!--3rd drop down menu -->
<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>
</div>

<div id="main"></div>
<div id="rr"><img src="images/RR-teaser.png" width="255" height="168" /></div>
<div id="testimonials"><img src="images/Testimonials-bknd.png" width="258" height="168" 
/></div>
<div id="dod"><img src="images/DoD-teaser.png" width="255" height="168" /></div>
<div id="footer">Copyright 
2009 Kr&ouml;ntechnology.com &nbsp;I &nbsp;Contact Webmaster</div>
</div>
</body>
</html>

任何帮助都将非常感谢!!!!

Answer 1

你做错了三件事：

使用没有相对父级的绝对定位
使用Javascript更改位置值
本身并没有真正的错误，但是你失去了语义，因为下拉菜单不是菜单的一部分。它们与父项无关。

对于＃1，您应该将菜单（#dropmenu）设置为position:relative。然后，所有绝对定位的子项将相对于该元素的左上角定位。这意味着您可以将top: 0; left: 500px放在下拉列表*上，它将始终显示在同一位置。（500值只是猜测，但由于你的设计是固定的，它将是一个恒定值。）

对于＃2，这意味着您不需要使用Javascript来重新定位元素，只需打开和关闭可见性。

对于＃3，我还建议你自己制作菜单的下拉菜单，而不是兄弟姐妹。这是更多语义和屏幕阅读器然后知道菜单项之间的关系。您可以使用类似于此的HTML：

<ul class="menu-level1">
  <li><a href="">About Us</a></li>
  <li><a href="">Contact Us</a>
    <ul class="menu-level2">
      <li><a href="">Locations</a></li>
      <li><a href="">Register</a></li>
    </ul>
  </li>
  <li><a href="">Case Studies</a></li>
</ul>

您可以在position: relative上设置.menu-level1，在position: absolute设置.menu-level2。

Answer 2

它没有考虑#wrap div的offsetLeft。

更改您的cssdropdown文件。

cssdropdown.dropit = function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
        this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
        // <<<<<< BEGIN CHANGE (notice the "- document.getElementById('wrap').offsetLeft")
    this.dropmenuobj.style.left=(this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")-document.getElementById('wrap').offsetLeft)+"px"
        // <<<<<< END CHANGE
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
}

定位我的下拉div

2 个答案: