<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>水果
<ul class="none">
<li>火龙果</li>
<li>菠萝</li>
<li>柚子</li>
<li>橙子</li>
<li>牛油果</li>
<li>荔枝</li>
<li>木瓜</li>
<li>榴莲</li>
<li>柠檬</li>
<li>香蕉</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function (){
$("li:eq(0)").css({
"width":"400","height":"400","margin":"100px auto"
})
$(".none").css("display","none");
$("li:eq(0)").mouseover(
function(){$(".none").css("display","block");}
);
$("li:eq(0)").mouseout(
function(){$(".none").css("display","none");}
);
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>水果
<ul class="none">
<li>火龙果</li>
<li>菠萝</li>
<li>柚子</li>
<li>橙子</li>
<li>牛油果</li>
<li>荔枝</li>
<li>木瓜</li>
<li>榴莲</li>
<li>柠檬</li>
<li>香蕉</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function (){
$("li:eq(0)").css({
"width":"400","height":"400","margin":"100px auto"
})
$(".none").css("display","none");
$("li:eq(0)").mouseover(
function(){$(".none").css("display","block");}
);
$("li:eq(0)").mouseout(
function(){$(".none").css("display","none");}
);
});
</script>
</body>
</html>