我无法确保我的事件图形位于按钮外部,基本上父元素的溢出使图形隐藏在按钮内部而不是外部。我尝试使用 position:absolute 和 z-index 但我无法解决这个问题。
HTML
<ul id="mynav">
<li class="active"><a href="#">Link</a>
<ul id="subernav">
<li><a href="#">Inner Link 1</a></li>
<li><a href="#">Inner Link 2</a></li>
<li><a href="#">Inner Link 3</a></li>
</ul>
<span class="active ir">Active Link</span>
</li>
<!-- More links -->
<!--<li><a href="#">Link</a></li>-->
<!--<li><a href="#">Link</a></li>-->
<!--<li><a href="#">Link</a></li>-->
<!--<li><a href="#">Link</a></li>-->
</ul>
CSS
body{background:#000;color:#000;font-family:Arial;padding:20px;}
a{text-decoration:none;color:#000;}
#mynav > li{height:45px;background:#fff;width:458px;padding:5px 10px;text-align:center;overflow:hidden;margin-bottom:30px;position:relative}
#mynav > li a{line-height:45px;}
#mynav li.active:hover{height:90px;cursor:pointer}
#mynav li .active{background:#f00 url('http://dummyimage.com/15/f00/fff&text=+') no-repeat -668px -214px;width:15px;height:15px;position:absolute;left:50%;bottom:-15px;margin-left:-7.5px;border:1px solid #f00;z-index:250}
#subernav li{display:inline-block;zoom:1;*display:inline;}
#subernav li a{color:#f00;}
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
fiddle 链接: http://jsfiddle.net/UbvQk/5/
最佳答案
从 mynav active
(和 :hover
)中移除 overflow:hidden
和 height
。
将 subernav
设置为 display:none;
。
添加#mynav li.active:hover #subernav
以拥有display:block;
关于html - 如何将绝对定位的图像放置在其已 overflow hidden 的父元素之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9939939/