您当前的位置:首页 > 网页设计 > Web开发 > 正文

DIVCSS实例:一款带圆角的简洁CSS导航下拉菜单

【字体大小: 2009-11-14 23:10 来源: 作者: 

  CSS导航下拉菜单是让CSSer很有兴趣的东西,在实际开发中也会经常遇到。今天52CSS.com向大家介绍一款,带有圆角的简洁CSS导航下拉菜单。代码并不是很复杂,但实现的效果不错。

  看下面的效果图:

  

 

  我爱CSS上有更多的菜单实例,。

  本文所介绍的这款CSS导航下拉菜单用到了很多浏览器条件注释。大家看看HTML代码:  

<div class="menu">

<ul>
<li><a href="http://www.52css.com/    ">52CSS.com<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
    <li><a class="sub1" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
            <li><a class="sub2" href="#nogo">FLYOUT third level<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                    <li><a href="#nogo">Third level-1</a></li>
                    <li><a href="#nogo">Third level-2</a></li>
                    <li><a href="#nogo">Third level-3</a></li>
                    <li class="last"><a href="#nogo">Third level-4</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="last"><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li class="last"><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li class="last"><a href="circles.html" title="circular links">circular links</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    <li class="last"><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li class="last"><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.w3cbbs.com/">W3Cbbs.com<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="left">
    <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    <li class="last"><a class="sub1" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
            <li class="last"><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

  CSS代码:  

  1. /* Set up the default font and ovrall size to include image */ 
  2.  body {  
  3.     background#fff;  
  4.     font-family"Lucida Grande"HelveticaArialsans-serif;  
  5.     font-size12px;  
  6. }  
  7. /* style the outer div to give it width */ 
  8. .menu {font-size:12pxpadding:0 0 200px 15pxwidth:700px;}  
  9.  
  10. /* remove all the bullets, borders and padding from the default list styling */ 
  11. .menu ul {padding:0;margin:0;list-style-type:noneheight:25pxbackground:transparent;}  
  12.  
  13. /* style the sub-level lists */ 
  14. .menu ul ul {width:625px;}  
  15.  
  16. /* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */ 
  17. .menu ul li {float:leftheight:25pxline-height:24pxdisplay:blockmargin-right:2px;}  
  18.  
  19. /* style the sub level list items */ 
  20. .menu ul ul li {display:blockwidth:150pxheight:autoline-height:1em;}  
  21. .menu ul ul li.last {padding-bottom:10pxbackground:url(sub_bottom.gif) bottom left no-repeat;}  
  22. .menu ul ul ul li.last {padding-bottom:10pxbackground:url(two_bottom.gif) bottom left no-repeat;}  
  23. .menu ul ul ul ul li.last {padding-bottom:10pxbackground:url(three_bottom.gif) bottom left no-repeat;}  
  24.  
  25. /* style the links for the top level */ 
  26. .menu a, .menu a:visited {display:blockfloat:leftheight:24pxwidth:115pxfont-size:10pxtext-decoration:nonecolor:#000background:#fff url(top.gif); padding:0 0 0 10pxtext-align:left;border:0border-bottom:1px solid #222;}  
  27. /* hack IE5.x to get the correct the faulty box model and get the width right */ 
  28. * html .menu a, * html .menu a:visited {width:125px; w\idth:115px;}  
  29.  
  30. /* style the sub level links */ 
  31. .menu ul ul a, .menu ul ul a:visited {display:block;background:#699color:#fff;width:128pxheight:100%line-height:1empadding:5px 10pxborder:1px solid #000border-width:0 1px;}  
  32. * html .menu ul ul a, * html .menu ul ul a:visited  {width:150px; w\idth:128px;}  
  33.  
  34. /* style the table so that it takes no part in the layout - required for IE to work */ 
  35. .menu table {border-collapse:collapsepadding:0margin:-1pxwidth:0height:0font-size:1emz-index:1;}  
  36.  
  37. /* style the third level background */ 
  38. .menu ul ul ul a, .menu ul ul ul a:visited {background:#c99;}  
  39. /* style the fourth level background */ 
  40. .menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#c96;}  
  41. /* style the sub level 1 background */ 
  42. .menu ul :hover a.sub1 {background:#477;}  
  43. /* style the sub level 2 background */ 
  44. .menu ul ul :hover a.sub2 {background:#a77;}  
  45.  
  46. /* style the level hovers */ 
  47. /* first */ 
  48. * html .menu a:hover {color:#ff0border:0height:25pxposition:relativez-index:100;}  
  49. .menu li:hover {position:relative;}  
  50.  
  51. .menu :hover > a {color:#ff0border:0height:25px;}  
  52. /* second */ 
  53. * html .menu ul ul a:hover{color:#ff0background:#477position:relativez-index:110height:100%border:1px solid #000border-width:0 1px;}  
  54.  
  55. .menu ul ul li:hover {position:relative;}  
  56. .menu ul ul :hover > a {color:#ff0;background:#7aa;background:#477z-index:110height:100%border:1px solid #000border-width:0 1px;}  
  57. /* third */ 
  58. * html .menu ul ul ul a:hover {background:#a77position:relativez-index:120;}  
  59. .menu ul ul ul :hover > a {background:#a77;}  
  60. /* fourth */ 
  61. .menu ul ul ul ul a:hover {background:#a75position:relativez-index:130;}  
  62.  
  63.  
  64. /* hide the sub levels and give them a positon absolute so that they take up no room */ 
  65. .menu ul ul {visibility:hidden;position:absolute;height:0; top:25px; left:0width:150px;}  
  66.  
  67. /* position the third level flyout menu */ 
  68. .menu ul ul ul{top:-10pxwidth:150px;}  
  69.  
  70.  
  71. /* make the second level visible when hover on first level list or link */ 
  72. .menu ul :hover ul {visibility:visibleheight:autopadding:15px 30px 30px 30pxbackground:transparent url(sub_top.gif) 30px 0 no-repeat; left:-30px;}  
  73. .menu ul :hover ul.left {visibility:visibleheight:autopadding:15px 30px 30px 30pxbackground:transparent url(sub_top_left.gif) 30px 0 no-repeat; left:-55px;}  
  74.  
  75.  
  76. /* keep the third level hidden when you hover on first level list or link */ 
  77. .menu ul :hover ul ul{visibility:hidden;}  
  78. /* keep the fourth level hidden when you hover on second level list or link */ 
  79. .menu ul :hover ul :hover ul ul{visibility:hidden;}  
  80. /* make the third level visible when you hover over second level list or link */ 
  81. .menu ul :hover ul :hover ul{visibility:visible; left:90pxheight:autopadding:10px 30px 30px 30pxbackground:transparent url(two_top.gif) 30px 0 no-repeat;}  
  82. .menu ul :hover ul.left :hover ul {left:-150px;}  
  83. /* make the fourth level visible when you hover over third level list or link */ 
  84. .menu ul :hover ul :hover ul :hover ul {visibility:visible; left:90pxheight:autopadding:10px 30px 30px 30pxbackground:transparent url(three_top.gif) 30px 0 no-repeat;} 
    顶一下
    (4)
    80%
    踩一下
    (1)
    20%
    【责任编辑:绝口不提】 标签:
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: