下拉菜单的案例完成hover的运用

Original 2019-03-20 17:17:44 299
abstract:<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> New Document </title>  <style type="text/css"> 

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title> New Document </title>  

<style type="text/css">   

*{ margin:0px; padding:0px;}   

#nav{ width:600px; height:40px; margin:0 auto;}   

#nav ul{ list-style:none;}   

#nav ul li{ float:left; line-height:40px; text-align:center; position:relative;}   

#nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}   

#nav ul li a:hover{ color:#FFF; background:#333}   

#nav ul li ul{ position:absolute; display:none;}   

#nav ul li ul li{ float:none; line-height:30px; text-align:left;}   

#nav ul li ul li a{ width:100%;}   

#nav ul li ul li a:hover{ background-color:#06f;}   

#nav ul li:hover ul{ display:block}   

</style>   

 </head>

 <body>

  

<div id="nav">   

    <ul>   

        <li><a href="#">首页</a></li>   

        <li><a href="#">学习中心</a>   

            <ul>   

                <li><a href="#">java</a></li>   

                <li><a href="#">jQuery</a></li>   

                <li><a href="#">C++</a></li>   

                <li><a href="#">C语言</a></li>   

            </ul>           

        </li>   

        <li><a href="#">个人中心</a></li>   

        <li><a href="#">关于我们</a></li>   

    </ul>   

</div>   

 </body>

</html>


Correcting teacher:天蓬老师Correction time:2019-03-20 17:31:34
Teacher's summary:css中的hove, javascript中的鼠标悬停事件, 有很多相似的地方, 有空了解一下

Release Notes

Popular Entries