鼠標移入側邊欄一級菜單後，二級菜單顯示

就是簡簡單單的一個小功能，鼠標移入側邊欄的一級菜單後，相對應的二級菜單顯示。
效果大概如圖：

CSS：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        width: 150px;
        position: relative;
        margin: 10px 0 0 10px;
        background-color: #c0c0c0;
    }
    .wrapper {
        list-style: none;
        margin-left: 5px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        position: relative;
    }
    .wrapper_a {
        text-decoration: none;
        color: #000000;
    }
    .wrap ul li a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .wrap ul li a:hover {
        color: #ffffff;
    }
    .details_wrap {
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: #666666;
        position: absolute;
        left: 100%;
        top: 0;
        padding-left: 5px;
        list-style: none;
        display: none;
    }
    .details_wrap a {
        text-decoration: none;
        color: darkgrey;
    }
    .details_wrap a:hover {
        color: dimgray;
    }
</style>

HTML：

<div class="wrap">
    <ul>
        <li class="wrapper">
            <a href="#" class="wrapper_a">居家</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">詳情1</a></li>
            </ul>
        </li>
        <li class="wrapper">
            <a href="#" class="wrapper_a">生活</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">詳情2</a></li>
            </ul>
        </li>
        <li class="wrapper">
            <a href="#" class="wrapper_a">購物</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">詳情3</a></li>
            </ul>
        </li>
        <li class="wrapper">
            <a href="#" class="wrapper_a">科普</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">詳情4</a></li>
            </ul>
        </li>
    </ul>
</div>

JS：

<script src="../jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function(){
        方法一：
        $(".wrapper").mouseover(function () {
            $(".details_wrap",this).show();
        }).mouseout(function () {
            $(".details_wrap",this).hide();
        });

        $(".details_wrap").mouseover(function () {
            $(".details_wrap",this).show();
        }).mouseout(function () {
            $(".details_wrap",this).hide();
        })

        方法二：
        $(".wrapper").mouseover(function () {							          $(this).find(".details_wrap").css('display','block');
        }).mouseout(function () {            $(this).find(".details_wrap").css('display','none');
        })
    })
</script>

不知道爲啥，方法二的格式有錯誤，請自行調整。
兩隻小菜鳥被這個搞了一下午，但依然存在很多疑問。比如，方法一中mouseover前爲什麼選擇wrapper而不能是其他？
請指教啊。

另外，還有沒有其他的方法？
不吝賜教啊。