Question

Im having trouble making sure my active graphic is positioned outside of the button, basically the overflow of the parent element keeps the graphic hidden inside of it instead of being outside. I have tried to use position:absolute and z-index but I cant solve this.

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;}​

Link to fiddle:
http://jsfiddle.net/UbvQk/5/

Answer 1

Remove the overflow: hidden and the height from the mynav active (and the :hover).

Set the subernav to display:none;.

Add #mynav li.active:hover #subernav to have display:block;

Updated Fiddle