how to change the parent div's height?

Question

I am new to CSS. I want to apply background color for div . But the div height is zero. div has child elements too. Here is my code. I added float to that ul,li elements.I searched so many sites I applied clear to the div ,but its not changing.

 <div id="menulinks">
    <ul class="dropdown">
        <li>
            <a href="#">projectCategoraization</a>
            <div id="submenu_pc">
                <ul class="submenu">
                    <li><a href="#">dgfdg</a></li>
                    <li><a href="#">tutyu</a></li>
                    <li><a href="#">ert45</a></li>
                    <li><a href="#">7y56uty</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

style

#submenu_pc {
    width:240px;
    display:none;
    position:absolute;
}
.dropdown {
    float:left;
}
.dropdown li {
    float:left;
    list-style:none;
}
.submenu {
    position:absolute;
}
.dropdown ul li {
    float:none;
}

script is

$(function(){
  $(".dropdown li").hover(function(){
        //alert("soumya");
        $(this).addClass("hover");
    $('#submenu_pc').css('display', 'block');
  });
});

Answer 1

Adding background color to the UL with class of submenu

.submenu
{
    background-color:aqua;  
}

Answer 2

Add this CSS and remove the script completely!

#menulinks{
    overflow:hidden;
    background: red; // choose your color
}

#submenu_pc {
    width:240px;
    display:none;
}

.dropdown li:hover #submenu_pc{
    display: block;
}
.dropdown {
    float:left;
}
.dropdown li {
    float:left;
    list-style:none;
}
.dropdown ul li {
    float:none;
}

Answer 3

.submenu has position: absolute which means its parent has a height of 0 . Remove position: absolute and assign a background color to the parent; that should do it.

jsFiddle