Позициониране на моите падащи divs

Най-трудно ми е да контролирам къде се показват моите падащи менюта! Прегледах 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="/bgindex.css" rel="stylesheet" type="text/css" />
<link href="/bgimages/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="/bg#">THE TEAM </a></li>
<li><a href="/bg#">POSITIONS</a></li>
<li><a href="/bg#">QUICK FACTS </a></li>
<li><a href="/bg#">TESTIMONIALS </a></li>  
<li><a href="/bg#">PARTNERS </a></li>  
<li><a href="/bg#" rel="dropmenu1">CONTACT US </a></li>    
<li><a href="/bg#">CASE STUDIES </a></li>  
<li><a href="/bg#" 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>

Всяка помощ ще бъде високо оценена!!!!


drop-down-menu css
person Community    schedule 19.08.2009    source източник
comment
искате ли да имате падащо меню или не? мисля, че може да е bcoz от позиция: абсолютна! изпълнявам това в IE6 и мога да видя падащото меню най-вдясно!   -  person RubyDubee    schedule 19.08.2009

Отговори (2)


arrow_upward
3
arrow_downward

Три неща, които правите погрешно:

  1. Използване на абсолютно позициониране без относителен родител
  2. Използване на Javascript за промяна на стойностите на позицията
  3. Само по себе си не е грешно, но губите семантика, защото падащите менюта не са част от менюто. Те не са свързани с техните родителски елементи.

За #1 трябва да зададете менюто (#dropmenu) на position:relative. Тогава всички абсолютно позиционирани деца ще бъдат позиционирани спрямо горния ляв ъгъл на този елемент. Това означава, че можете да поставите top: 0; left: 500px в падащото меню* и то винаги ще се показва на едно и също място. (Стойността 500 е само предположение, но тъй като вашият дизайн е фиксиран, тя ще бъде постоянна стойност.)

За #2 това означава, че не е необходимо да използвате Javascript за препозициониране на елементите, просто включете и изключете видимостта.

За #3 бих предложил също така да направите падащите менюта деца на самото меню, а не братя и сестри. Това е по-семантично и след това екранните четци знаят връзката между елементите на менюто. Можете да използвате HTML, подобен на този:

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

Бихте задали position: relative на .menu-level1 и position: absolute на .menu-level2.

person DisgruntledGoat    schedule 19.08.2009

arrow_upward
0
arrow_downward

не взема под внимание offsetLeft на вашия #wrap div.

направете промяната във вашия 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
}
person Joshua    schedule 19.08.2009