gpt4 book ai didi

jquery - 填充对具有绝对定位的下拉菜单有意想不到的影响

转载 作者:行者123 更新时间:2023-11-28 18:30:02 24 4
gpt4 key购买 nike

我有#header具有以下 css 属性的 div:

#header{
background-image:url('img/header-bkg-tile.png');
background-repeat:repeat-x;
}

#header-container里面有这个属性:

#header-container{
height:63px;
width: 1120px;
position: relative;
left : 50%;
margin-left: -560px;
padding-top:19px;
}

为了以防万一,结构是这样的:

<div id="header">
<div id="header">
</div>
</div>

内部#header你有一张图片和一个<ul> ,一切都按预期工作。

我的问题是在创建这个 simple dropdow 时.

问题本身是我无法到达 .sub_menu 的下部,在您进入倒数第二个元素下方后,下拉菜单会返回到“静止位置”。

你可以看到一个live example here .

我已经找出问题所在,它与我用来使图像垂直居中的填充有关:padding-top:19px;

下拉框相关代码如下:

/* 
LEVEL ONE
*/
ul.dropdown { position: relative; }
ul.dropdown li { float: left; zoom: 1; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { position: relative; }
ul.dropdown li.hover a { color: black; }

/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li { font-weight: normal; background: #C8E4ED; color: #000;
border-bottom: 1px solid #ccc; float: none; }

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }

我已经尝试了各种各样的事情,但老实说,我或多或少是在猜测,我想了解问题出在哪里。

虽然我会在 LEVEL TWO 中添加负填充elements 本来可以解决问题,但事实并非如此,因此任何指针都可以提供帮助。

编辑: header 标记如下:

 <div id="header">
<div id="header-container">
<div id="header-all">
<a href="#"><img id="logo" src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="logo uruware"/></a>
<ul id="header-elements" class="dropdown">
<li><a href="#" class="active-selection">Inicio</a>
<ul class="sub_menu">
<li><a href="#1">UCFE</a></li>
<li><a href="#2">Trx Server</a></li>
<li><a href="#3">Trx Framework</a></li>
</ul>
</li>
<li><a href="#">Quiénes somos</a></li>
<li><a href="#">Productos</a>

</li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Novedades</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</div>

最佳答案

这是一个z-index问题。

规则是 HTML 代码中之后的所有内容都在之上。因此,您的 div #container,位于您的 ul 下拉列表之后,位于您的 ul 下拉列表之上

要解决这个问题,请将其添加到您的下拉列表中:

ul.dropdown ul {
z-index: 2000;
}

或者只是 z-index: 1;,只要您设置您的 z-index。

关于jquery - 填充对具有绝对定位的下拉菜单有意想不到的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14610272/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com