css隐藏菜单不隐藏

html-css05

css隐藏菜单不隐藏,第1张

<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>

<style type="text/css">

ul{

font-size:12px

list-style:none

margin:0px

padding:0px

}

li{

padding:7px

}

a{

color:#FFF

text-decoration:none

}

a:hover{

color:#000

}

#menu{

float:left

text-align:center

width:70px

height:295px

padding-top:5px

margin-top:80PX

display:none

background-image:url(%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.gif)

}

</style>

<body>

<span id="box">

<img src="网页设计/1.gif" width="30" height="80" id="flag"/>

<div id="menu">

<ul>

<li><a href="#">学校地址</a></li>

<li><a href="#">学校热线</a></li>

<li><a href="#">学生登录</a></li>

</ul>

</div>

</span>

</body>

<script type="text/javascript">

$(document).ready(function(){

$("#box").hover(function(){

$("menu").show(300)//显示菜单

},function(){

$("#menu").hide(300)//隐藏菜单

})

})

</script>

替换一下就可以

.menu ul li a.hide, .menu ul li a:visited.hide {display:none}//将元素隐藏、不保留其物理空间.menu ul li a:hover {color:#fffbackground:#36f}//设置鼠标悬停时链接的字体颜色。背景颜色.menu ul li a:hover ul {display:blockposition:absolutetop:21pxleft:0width:105px}//鼠标悬停时显示隐藏的元素、绝对定位、上、左边的位置、设置宽度属性.menu ul li a:hover ul li a ul {visibility:hidden}设置ul元素隐藏、并且保留其物理空间.menu ul li a:hover ul li a:hover ul {visibility:visibleposition:absoluteleft:105pxtop:0color:#000}鼠标悬停时显示ul元素、并设置绝对定位字体颜色.menu ul li a:hover ul li a:hover ul.left {left:-105px}负边距定位、让其再往左边偏移105px

display:none /*隐藏*/

display: /*显示*/

<ul style="display:none">

<li>菜单</li>

<li>菜单</li>

</ul>