Question

我无法确保我的活动图形位于按钮之外，基本上父元素的溢出会使图形隐藏在其中而不是在外面。我试过使用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;}

链接到小提琴： http://jsfiddle.net/UbvQk/5/

Answer 1

从overflow: hidden（以及height）中删除mynav active和:hover。

将subernav设置为display:none;。

添加#mynav li.active:hover #subernav以获得display:block;

Updated Fiddle

如何将一个绝对定位的图像放在其隐藏溢出的父元素之外？

1 个答案: