[jQuery] Animating Height of Parent Hides Select Options

[Meander365]

When I focus on a select box I want the hidden tooltip to appear. When
I click on the select box the animation starts but the option list is
hidden. How do I get round this?

<style>
.showme {display:none;}
li {height:25px;background:red; }
select{z-index:100;}
p{margin:0px;padding:0px;}
</style>
<script type="application/javascript">
$(document).ready(function() {

    $("select")
        .focus(function(){
            var myParent = $(this).parent("li");
            var myInfo = $(this).siblings(".showme");

            $(myParent).data("myoldheight", $(myParent).height());

            $(myInfo).css
("display","block");
            var totalHeight = $(myParent).height() + $(myInfo).height
();

            $(myParent).animate({
                "height": totalHeight +
"px"
            },3000,function() {console.log
("animated");})
        })

        .blur(function() {

            $($(this).parent("li")).animate({
                "height": $(this).parent("li").data("myoldheight") +
"px"
            },500)

            $(this).siblings(".showme").hide();
        })
        })
</script>
<form>
<ul>
<li>
<label for="test">Test</label>
<select id="test" name="test">
    <option value=""></option>
    <option value="a">a</option>
    <option value="b">b</option>
</select>
<p class="showme">This is my text</p>
</li>
</ul>
</form>