相关文章
北京网站制作HTML元素语义的分类
北京网站建设通过修改及利用CSS实现改善网站可访问性
网站建设修改模板
北京网站建设XHTML 1.0
网页设计CSS实用教程（一）
北京网页设计CSS层叠样式的主次顺序
网站制作第十四节 设置
网站设计Photoshop结合Dreamweaver制作网页相册方法
网站制作Dreamweaver快捷键大全
网站建设Flash视频教程：1.16 套索工具
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作企通互联CSS+DIV设计实例：纯CSS制作下拉导航菜单
网站制作企通互联CSS+DIV设计实例：纯CSS制作下拉导航菜单
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qt-net.com
| 以下是引用片段：北京网站建设 <style type="text/css">网站制作 .menu {北京网站建设 font-family: verdana, sans-serif; 网站建设 width:750px; 北京网站设计 position:relative; 北京网站建设 font-size:0.85em;北京网站建设 padding-bottom:250px;北京网站设计 }网页设计 .menu ul {北京网站设计 padding:0; 北京网页设计 margin:0;网页设计 list-style-type: none;网站建设 }网页设计 .menu ul li {北京网页设计 float:left;北京网站制作 position:relative;网页设计 }网站建设 .menu ul li a, .menu ul li a:visited {网页设计 display:block; 北京网站制作 text-decoration:none; 北京网页设计 color:#000; 北京网站制作 width:139px; 网站制作 height:3em; 北京网页设计 color:#000; 网站建设 border:1px solid #fff; 北京网站制作 北京网站设计 border-width:1px 1px 0 0; 网站设计 background:#dfc184; 北京网站建设 padding-left:10px; 网站制作 line-height:3em;网页设计 }网站设计 * html .menu ul li a, .menu ul li a:visited {北京网页设计 width:149px;北京网站制作 w\idth:139px;网站设计 }北京网站建设 .menu ul li ul {网站制作 display: none;北京网站制作 }北京网页设计 table {北京网站设计 margin:-1px; 网页设计 border-collapse:collapse;网站建设 font-size:1em;北京网站制作 }网站设计 北京网站建设 /* specific to non IE browsers */网站制作 .menu ul li:hover a {北京网页设计 color:#fff; 企通互联 background:#bd8d5e;北京网页设计 }网站设计 .menu ul li:hover ul { 网页设计网站制作 display:block; 北京网站设计 position:absolute; 网站制作 top:3em;北京网站建设 margin-top:1px;网站建设 left:0; 北京网站建设 width:150px;网页设计 }网站建设 .menu ul li:hover ul li ul {北京网站设计 display: none;北京网站制作 }北京网站制作 .menu ul li:hover ul li a {北京网页设计 display:block; 网站制作 background:#faeec7; 网站建设 color:#000; 北京网站制作 height:auto; 企通互联 line-height:1.2em; 北京网页设计 padding:5px 10px; 企通互联 width:129px北京网页设计 }北京网站设计 .menu ul li:hover ul li a.drop {北京网页设计 background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;网站设计 }北京网站建设 .menu ul li:hover ul li a:hover {企通互联 background:#c9c9a7; 北京网站制作 color:#000;北京网站建设 }企通互联 .menu ul li:hover ul li:hover ul {北京网站设计 display:block; 企通互联 position:absolute; 网页设计 left:150px; 北京网页设计 top:0;北京网站制作 width:150px;网站设计 }北京网站建设 .menu ul li:hover ul li:hover ul.left {北京网页设计 left:-150px;企通互联 }网页设计 网站建设 </style>企通互联 <!--[if lte IE 6]>网站制作 <style type="text/css">北京网站建设 .menu ul li a:hover {北京网页设计 color:#fff; 企通互联 background:#bd8d5e;北京网页设计 }北京网页设计 .menu ul li a:hover ul {北京网页设计 display:block; 企通互联 position:absolute; 企通互联 top:3em; 网站建设 left:0;网站制作 background:#fff;北京网站制作 margin-top:0;网站设计 marg\in-top:1px;北京网站设计 }网站设计 .menu ul li a:hover ul li a {网站建设 display:block; 北京网站建设 background:#dbe4ab; 网站建设 color:#000; 北京网站制作 height:auto; 北京网站设计 line-height:1.5em; 北京网站建设 padding:5px 10px; 网页设计 width:150px;网站设计 w\idth:129px;网站建设 }网页设计 .menu ul li a:hover ul li a.drop {北京网站制作 background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;网站设计 }网页设计 .menu ul li a:hover ul li a ul { 企通互联北京网站建设 visibility:hidden; 网站设计 position:absolute; 北京网站建设 height:0; 网站制作 width:0;网站制作 }北京网站制作 .menu ul li a:hover ul li a:hover {企通互联 background:#c9c9a7; color:#000;北京网站设计 }网站设计 .menu ul li a:hover ul li a:hover ul {网站制作 visibility:visible; 北京网站制作 position:absolute; 北京网站设计 top:0; 网站建设 color:#000;网站设计 left:150px;网站建设 }网站建设 .menu ul li a:hover ul li a:hover ul.left {企通互联 left:-150px;网站设计 }北京网页设计 网站设计 </style>北京网站设计 <![endif]-->企通互联 <div class="menu">北京网站制作 网站设计 <ul>企通互联 <li><a class="drop" href="../menu/index.html">DEMOS北京网站设计 <!--[if IE 7]><!-->北京网站设计 </a>北京网站设计 <!--<![endif]-->北京网站设计 网站设计网站设计 <table><tr><td>企通互联 网站建设 <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="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders北京网站设计 <!--[if IE 7]><!-->北京网站设计 </a>北京网页设计 <!--<![endif]--> 北京网站建设企通互联 北京网站制作 北京网站制作 <table><tr><td>北京网页设计 <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 href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>网站建设 </ul>北京网页设计 </td></tr></table>网页设计 网站建设 <!--[if lte IE 6]>网站设计 </a>北京网站制作 <![endif]-->网站制作 网站设计 </li>网页设计 网页设计 <li class="upone"><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><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>网站制作 </ul>网站制作 网站建设 </td></tr></table>北京网站制作 北京网站设计 <!--[if lte IE 6]>企通互联 </a>网页设计 <![endif]-->北京网站建设 网站制作 </li>北京网站制作 北京网站建设 网页设计 <li><a href="../boxes/index.html">BOXES北京网站设计 <!--[if IE 7]><!-->北京网站设计 </a>北京网站设计 <!--<![endif]-->网站建设 北京网站建设 北京网页设计 <table><tr><td>北京网站建设 网站制作 <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><a href="circles.html" title="circular links">circular links</a></li>企通互联 www.qt-net.com </ul>北京网页设计 企通互联 </td></tr></table>北京网站制作 北京网站建设 <!--[if lte IE 6]> 网站建设网站制作 </a>北京网站设计 <![endif]-->网站制作 北京网站制作 </li>网站设计 北京网站制作 <li><a href="../mozilla/index.html">MOZILLA网站设计 <!--[if IE 7]><!-->北京网页设计 </a>网页设计 <!--<![endif]-->网站设计 网站建设 北京网站制作 <table><tr><td>北京网页设计 北京网站建设 <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><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>北京网站制作 </ul>北京网页设计 北京网页设计 </td></tr></table>网站建设 北京网站制作 <!--[if lte IE 6]>网站设计 </a>企通互联 <![endif]-->网站设计 网页设计 </li>网页设计 北京网站设计 <li><a href="../ie/index.html">EXPLORER网站建设 <!--[if IE 7]><!-->北京网站建设 </a>企通互联 <!--<![endif]-->北京网站设计 网站制作 网站设计 <table><tr><td>企通互联 网站制作北京网站设计 <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><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>北京网站设计 </ul>网站设计 网站设计 </td></tr></table>网页设计 网页设计 <!--[if lte IE 6]>企通互联 </a>北京网站设计 <![endif]-->北京网页设计 北京网站建设 </li>网站制作 北京网站建设 <li><a href="../opacity/index.html">OPACITY网页设计 <!--[if IE 7]><!-->北京网站建设 </a>网站建设 <!--<![endif]-->北京网站设计 北京网站设计 网站设计 <table><tr><td>北京网站制作 网站建设 <ul>网站设计 <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><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK网站制作 <!--[if IE 7]><!-->网站建设 </a>企通互联 <!--<![endif]-->企通互联 网站制作 <table><tr><td>企通互联 北京网站设计 <ul class="left">网站建设 <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 href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>网页设计 </ul>企通互联 北京网站设计 </td></tr></table>北京网站制作 网站设计 <!--[if lte IE 6]>北京网站制作 </a>企通互联 <![endif]-->网站设计 企通互联 </li>企通互联 </ul>北京网站设计 网页设计 </td></tr></table>网站设计 北京网站建设 <!--[if lte IE 6]>北京网站建设 </a>企通互联 <![endif]-->网页设计 北京网页设计 </li>网站设计 </ul>北京网页设计 北京网站设计 </div> |
上一篇：北京网站建设不用script仅用css编写无限分级弹出菜单
下一篇：北京网页设计CSS+DIV设计实例：超酷的竖排导航栏