个人中心
gpt4 book ai didi

css - 我的下拉 div 的定位

转载 作者：太空宇宙 更新时间：2023-11-04 00:33:51 25 4
gpt4 key购买 nike

我最难控制下拉菜单的显示位置!我浏览了 CSS 并进行了更改，但出于某种原因，它们似乎没有反射(reflect)出来。有人能看到我遗漏的任何东西吗？

如果您将鼠标悬停在下面链接中的“联系我们”和“帮助台”选项卡上，您就会明白我的意思。

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>

任何帮助将不胜感激!!!!

最佳答案

你做错了三件事:

  1. 在没有相对父级的情况下使用绝对定位
  2. 使用 Javascript 更改位置值
  3. 本身并没有错，但是你失去了语义，因为下拉菜单不是菜单的一部分。它们与其父元素无关。

对于 #1，您应该将菜单 (#dropmenu) 设置为 position:relative。然后所有绝对定位的 child 都将相对于该元素的左上角定位。这意味着你可以把 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>

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

关于css - 我的下拉 div 的定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1298919/

25 4 0
文章推荐： css - 是否有任何脚本/站点可以找到 Divs 的 z-index
文章推荐： javascript - 将值传递给 .js 文件的 npm run 脚本
文章推荐： c - 是否允许返回具有灵活数组成员的结构？
文章推荐： css - IE7 渲染问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com