Позиционирование моих выпадающих div

Мне очень трудно контролировать, где появляются мои раскрывающиеся списки! Я прошел 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>

Любая помощь будет принята с благодарностью!!!!


drop-down-menu css
person Community    schedule 19.08.2009    source источник
comment
Вы хотите иметь раскрывающийся список или нет? я думаю, что это может быть из-за положения: абсолютно! я запускаю это в 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="">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.

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