鼠标移入侧边栏一级菜单后，二级菜单显示

就是简简单单的一个小功能，鼠标移入侧边栏的一级菜单后，相对应的二级菜单显示。
效果大概如图：

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而不能是其他？
请指教啊。

另外，还有没有其他的方法？
不吝赐教啊。