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

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

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

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