Dropdown Menu

I’m currently working on a theme for iDevotees. The owner wants a dropdown menu. The menu has links to the homepage, other pages and categories on the top level and then the dropdown level shows the subcategories of the highlighted category.

I found a way to do it but the code spread the dropdown level across the page and made the page far too wide. To see what I mean, check out suburbanjunkie(dot)zxq(dot)net.

It would be awesome of someone could tell me what’s wrong or offer an alternative solution.

HTML/PHP:

<ul id="nav2" class="clearfloat">
    <li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
    <?php wp_list_pages('title_li=&depth=1');
    wp_list_categories('orderby=name&title_li=&depth=1');
    $this_category = get_category($cat);
    if (get_category_children($this_category->cat_ID) != "") {
        echo "<ul>";
        wp_list_categories('orderby=id&show_count=0&title_li=&child_of=&use_desc_for_title=1&depth=1'.$this_category->cat_ID);
        echo "</ul>";
    }
    ?>
</ul>

CSS:

#nav2{
    display: block;
    font-size:1.1em;
    height:50px;
    width:100%;
    padding: 0 50%;
}

#nav2, #nav2 ul {
    line-height: 1;
    list-style: none;
}

#nav2 a ,#nav2 a:hover{
    border:none;
    display: block;
    text-decoration: none;
}

#nav2 li {
    float: left;
    list-style:none;
    text-decoration: none;
    font-size: 15px;
    padding: 5px 5px;
    border-radius: 5px;
    margin: 10px 5px;
    box-shadow: 3px 3px 6px #CCC inset;
    font-family: Myriad Pro, sans-serif;
    background: #d3d5d7;
    font-weight: 100;
}

#nav2 li:hover {
    background: #59a4ff;
    box-shadow: 3px 3px 6px #4787d5 inset;
}

#nav2 a,#nav2 a:visited {
    display:block;
    font-weight:bold;
    padding:6px 12px;
}

#nav2 a:hover, #nav2 a:active {
    color:#fff;
    text-decoration:none
} 

#nav2 li ul {
    height: auto;
    left: 100px;
    position: absolute;
    z-index:999;
    width: 100%;
    padding: 0 50%;
}

#nav2 li li {
    width: auto;
}

#nav2 li li a,#nav2 li li a:visited {
    font-weight:normal;
    font-size:0.9em;
}

#nav2 li li a:hover,#nav2 li li a:active {
    color:#fff;
} 

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
    left: 30px;
}