铁岭市快乐行走户外运动协会

快乐行走户外运动协会

 找回密码
 立即注册
搜索
查看: 79|回复: 1

简单的CSS 下拉导航菜单实现代码

[复制链接]
  • TA的每日心情
    努力
    2018-5-29 15:03
  • 签到天数: 62 天

    [LV.6]常住居民II

    1466

    主题

    11

    精华

    32

    好友

    管理员

    团嘉奖

    Rank: 9Rank: 9Rank: 9

    UID
    2
    积分
    198893
    威望
    6976
    金钱
    52667
    贡献
    108097
    快乐豆
    18880
    帖子
    5242
    注册时间
    2014-10-2
    在线时间
    267 小时
    最后登录
    2018-6-17
    阅读权限
    200
    年费会员
    2017-2019

    环保大使奖征服三千奖社区建设奖杰出贡献奖宣传大使奖优秀版主奖坚定不移奖团队精英奖打破纪录奖助人为乐奖最佳出勤奖热情参与奖爱心公益奖无界穿越奖挑战两千奖征服两千奖勇攀高峰奖征服天下奖收官徒步奖长城烽火奖

    QQ
    发表于 2018-5-25 07:41 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,浏览高清大图,让你轻松玩转快乐论坛

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    首先,我们来给这个下拉菜单写一个HTML的代码。先创建一个div来做为容器,然后把这个导航菜单放到这个内器里,正如下面的代码,我们用无序列表来创建这个导航菜单。在这个导航菜单中Portfolio项下有一个子菜单,我用粗体表示出来,最后说一句别忘了关闭</li>(可以看这个:css技巧-清除多余的标签让代码更加有意义)

    HTML代码
    1. <div id="nav">
    2. <ul>
    3. <li class="first"><a href="#">Home</a></li>
    4. <li><a href="#">About Me</a></li>
    5. <li><a href="#">Portfolio</a>
    6. <b><ul>
    7. <li><a href="#">Web</a></li>
    8. <li><a href="#">Print</a></li>
    9. <li><a href="#">Photos</a></li>
    10. </ul> </b>
    11. </li>
    12. <li><a href="#">Contact Me</a></li>
    13. </ul>
    14. </div>
    复制代码

    The css
    首先。我们来给#nav div设置一个样式。给它一个宽度、高度、字体大小,并把默认的无序列表样式给去掉。

    1. *{ margin:0px; padding: 0px; }
    2. #nav {
    3. font-family: arial, sans-serif;
    4. position: relative;
    5. width: 390px;
    6. height:56px;
    7. font-size:14px;
    8. color:#999;
    9. margin: 0 auto;
    10. }
    11. #nav ul {
    12. list-style-type: none;
    13. }
    复制代码

    在这一步我们给<li>设置左浮动让整个导航水平。并且设置相对,记<li>成为一个祖元素,这样我们下面就可以利用到绝对定位了。


    1. #nav ul li {
    2. float: left
    3. position: relative;
    4. }
    复制代码

    在这一步我们给<a>标签设置一个样式,使它看起来像一个按扭

    1. #nav ul li a {
    2. text-align: center;
    3. border-right:1px solid #e9e9e9;
    4. padding:20px;
    5. display:block;
    6. text-decoration:none;
    7. color:#999;
    8. }
    复制代码

    最重要的部分
    这部分将展示给你看如何让下拉菜单的显示和隐藏。
    当鼠标没有移动到WEB项里下拉菜单不显示,当鼠标移动到WEB项上面时下拉菜单显示,我们用display的属性来实现这个效果。

    1. #nav ul li ul {
    2. display: none
    3. }
    4. #nav ul li:hover ul {
    5. display: block;
    6. position: absolute;
    7. }
    复制代码

    我们给下拉菜单的悬停状态设置样式

    1. #nav ul li:hover ul li a {
    2. display:block;
    3. background:#12aeef;
    4. color:#ffffff;
    5. width: 110px;
    6. text-align: center;
    7. border-bottom: 1px solid #f2f2f2;
    8. border-right: none;
    9. }
    10. #nav ul li:hover ul li a:hover {
    11. background:#6dc7ec;
    12. color:#fff;
    13. }
    复制代码

    完整的CSS

    1. *{ margin:0px; padding: 0px; }
    2. #nav {
    3. font-family: arial, sans-serif;
    4. position: relative;
    5. width: 390px;
    6. height:56px;
    7. font-size:14px;
    8. color:#999;
    9. margin: 0 auto;
    10. }
    11. #nav ul {
    12. list-style-type: none;
    13. }
    14. #nav ul li {
    15. float: left;
    16. position: relative;
    17. }
    18. #nav ul li a {
    19. text-align: center;
    20. border-right:1px solid #e9e9e9;
    21. padding:20px;
    22. display:block;
    23. text-decoration:none;
    24. color:#999;
    25. }
    26. #nav ul li ul {
    27. display: none
    28. }
    29. #nav ul li:hover ul {
    30. display: block;
    31. position: absolute;
    32. }
    33. #nav ul li:hover ul li a {
    34. display:block;
    35. background:#12aeef;
    36. color:#ffffff;
    37. width: 110px;
    38. text-align: center;
    39. border-bottom: 1px solid #f2f2f2;
    40. border-right: none;
    41. }
    42. #nav ul li:hover ul li a:hover {
    43. background:#6dc7ec;
    44. color:#fff;
    45. }
    复制代码

    演示代码:

    1. <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</div><div> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div><div><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></div><div><head></div><div> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /></div><div> <title>Plain Shane Design > CSS Drop Down Demo</title></div><div> <style type="text/css"></div><div> *{margin:0; padding: 0;}</div><div> body { background:#444;}</div><div> #navcont { background: #fff; width: 100%;}</div><div> #nav { font-family: helvetica; position:relative; width:377px; height:56px; font-size:14px; color:#999; </div><div>margin: 0 auto; }</div><div> #nav ul { list-style-type:none; }</div><div> #nav ul li { float:left; position: relative;}</div><div> #nav ul li a { border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; text-</div><div>align:center; color:#999;}</div><div> #nav ul li a:hover {background: #12aeef url(//files.jb51.net/demoimg/200912/shadow.png) repeat-x;; </div><div>color:#fff;} </div><div> #nav ul li ul {display: none;}</div><div> #nav ul li:hover ul {display: block; position: absolute; top:56px; min-width:190px; left:0;} </div><div> #nav ul li:hover ul li a {display:block; background:#12aeef; color:#ffffff; width: 110px; text-align: </div><div>center; border-bottom: 1px solid #f2f2f2; border-right: none;}</div><div> #nav ul li:hover ul li a:hover { background:#6dc7ec; color:#ffffff; }</div><div> .borderleft {border-left: 1px solid #e9e9e9;}</div><div> .top { border-top: 1px solid #f2f2f2;}</div><div> /*  This piece of code is for a third level drop down menu and is not included in this tutorial  #nav ul </div><div>li:hover ul li ul {display:none;}</div><div> #nav ul li:hover ul li:hover ul {display:block; position: absolute; top:-1px; left: 151px;}*/</div><div> /* Ignore this last piece of code */</div><div> #threestyles {</div><div>  width: 500px;</div><div>  height: 300px;</div><div>  margin: 0px auto;</div><div>  border: 2px solid #666;</div><div>  margin-top: 30px;</div><div> }</div><div> </div><div> </style></div><div></head></div><div><body></div><div><div id="navcont"> </div><div><div id="nav"> </div><div><ul></div><div> <li class="borderleft"><a href="http://www.jb51.net" target="_blank">Home</a></li></div><div> <li><a href="http://www.jb51.net" target="_blank">About Me</a></li></div><div> <li><a href="http://www.jb51.net" target="_blank">Portfolio</a></div><div>  <ul></div><div>   <li class="top"><a href="http://www.jb51.net" target="_blank">Web</a></li></div><div>   <li><a href="http://www.jb51.net" target="_blank">Print</a></li></div><div>   <li><a href="http://www.jb51.net" target="_blank">The Rest</a></li></div><div>  </ul></div><div> </li> </div><div> <li><a href="http://www.jb51.net" target="_blank">Contact</a></div><div>   <ul></div><div>    <li class="top"><a href="http://www.jb51.net" target="_blank">Web</a></li></div><div>    <li><a href="http://www.jb51.net" target="_blank">Print</a></li></div><div>    <li><a href="http://www.jb51.net" target="_blank">The Rest</a></li></div><div>   </ul></div><div> </li></div><div></ul></div><div></div></div><div></div></div><div><div id="threestyles"><a href="http://www.jb51.net" target="_blank"><img </div><div>src="//files.jb51.net/demoimg/200912/threestyles.png" /></div></div><div></body></div><div></html></div>
    复制代码


    提示:您可以先修改部分代码再运行

    用亲情团结队员形成凝聚力,用严格时间观念保证管理,用安全快乐带领大家户外行走。
    2017锦绣江山全国旅游年票一卡通,铁岭快乐行走户外运动协会总代理,团购热线:15941036641
  • TA的每日心情
    努力
    2018-5-29 15:03
  • 签到天数: 62 天

    [LV.6]常住居民II

    1466

    主题

    11

    精华

    32

    好友

    管理员

    团嘉奖

    Rank: 9Rank: 9Rank: 9

    UID
    2
    积分
    198893
    威望
    6976
    金钱
    52667
    贡献
    108097
    快乐豆
    18880
    帖子
    5242
    注册时间
    2014-10-2
    在线时间
    267 小时
    最后登录
    2018-6-17
    阅读权限
    200
    年费会员
    2017-2019

    环保大使奖征服三千奖社区建设奖杰出贡献奖宣传大使奖优秀版主奖坚定不移奖团队精英奖打破纪录奖助人为乐奖最佳出勤奖热情参与奖爱心公益奖无界穿越奖挑战两千奖征服两千奖勇攀高峰奖征服天下奖收官徒步奖长城烽火奖

    QQ
     楼主| 发表于 2018-5-25 07:49 | 显示全部楼层

    最终效果参见铁岭快乐行走户外运动协会选举专题网页:http://www.52klxz.com/xuanju/index.html
    用亲情团结队员形成凝聚力,用严格时间观念保证管理,用安全快乐带领大家户外行走。
    2017锦绣江山全国旅游年票一卡通,铁岭快乐行走户外运动协会总代理,团购热线:15941036641
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|小黑屋|Archiver|(辽公网安备 21120202000104号)|快乐行走户外运动协会 ( 辽ICP备14015085号-1   360安全

    GMT+8, 2018-6-18 13:51 , Processed in 1.320323 second(s), 16 queries , Xcache On.

    Powered by Discuz! X3.2 官方QQ:1836376255 业务咨询:15941036641 联系邮箱:ddd_xp@163.com

    快速回复 返回顶部 返回列表