HTML中鼠标悬浮时的下拉菜单用CSS怎么做

html-css022

HTML中鼠标悬浮时的下拉菜单用CSS怎么做,第1张

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：

<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>

划水摸鱼的时候研究了下CSS实现悬浮式菜单，在此分享一下！

transition是一个复合属性，有四个属性transition: <transition-property>|| <transition-duration>|| <transition-timing-function>|| <transition-delay>

另外，transition与display的冲突此处暂不做讨论！

你好，按照你的要求和代码，我写了一个范例，请参考：

<li><a id="p1" href="#">新闻资讯</a>

  <ul id="c1">

    <li><a href="#">新闻资讯</a></li>

    <li><a href="#">新闻资讯</a></li>

    <li><a href="#">新闻资讯</a></li>

  </ul>

</li>

<script>

  //悬停在子列表上面时改变顶列表的背景

  document.getElementById('c1').onmouseover = function(){

    document.getElementById('p1').style.background = "#f00"

  }

  //鼠标离开子列表时恢复顶列表的背景

  document.getElementById('c1').onmouseout = function(){

    document.getElementById('p1').style.background = "#fff"

  }

</script>

运行效果1：鼠标悬停在子列表上时

运行效果2：鼠标离开子列表时

如有疑惑，欢迎追问。