<html>
<body>
<script src="static/js/jquery.min.js"></script>
<style>
/*div {border: 1px solid blue;}*/
ul{
list-style: none;
position: relative;
}
ul>li{
padding: 3px 5px;
border: 1px skyblue solid;
width: 100px;
}
li > div{
display: none;
}
li:hover > div{
display: block;
}
</style>
<div>
<ul>
<li οnmοuseοver="showDiv()" οnmοuseleave="hideDiv()">
<a >前端开发</a>
<div id="li2" style="width:600px;position: absolute;left: 110px;top: -1px;border:1px solid red;">
<div >
<div >
<div >
<p><span>知识体系</span></p>
<div>
<dl>
<dt><a href="jj.com">前端基础</a></dt>
<dd class="cf">
<a href="bb.com">HTML</a>
<a >CSS</a>
<a href="cc.com">JavaScript</a>
<a >HTML5</a>
<a >CSS3</a>
<a >技术前瞻</a>
</dd>
</dl>
<dl>
<dt><a >前端进阶</a></dt>
<dd class="cf">
<a >Typescript</a>
<a >前端安全</a>
<a >项目实战</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a>后端知识</a>
</li>
<li>
运维知识
</li>
</ul>
</div>
</body>
</html>
<script type="text/JavaScript">
function showDiv(){
document.getElementById("li2").style.display = 'blok';
}
function hideDiv(){
document.getElementById("li2").style.display = 'none';
}
window.onload = hideDiv();
</script>
其中红色部分和蓝色部分含义一致。
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
