特效下拉菜单

最新推荐文章于 2025-09-11 10:42:34 发布

转载最新推荐文章于 2025-09-11 10:42:34 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hailiang/archive/2011/06/25/2089443.html

文章标签：

#xhtml

本文详细介绍了如何使用纯CSS来创建一个简洁且响应式的下拉菜单。通过设置适当的样式属性，如浮动、定位及伪类选择器:hover，使得菜单项在鼠标悬停时展开子菜单。此外，还展示了如何统一菜单项的宽度和高度，以及如何为不同状态下的链接应用不同的颜色和背景。

View Code

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title></title>
  6 <style type="text/css">
  7 /* common styling */
  8 /* set up the overall width of the menu div, the font and the margins */
  9 .main {
 10     height:40px;
 11     padding:20px;
 12     padding-bottom:20px;
 13     width:750px;
 14     background:#333333;
 15 }
 16 .menu {
 17     font-family: arial, sans-serif;
 18     width:750px;
 19 }
 20 /* remove the bullets and set the margin and padding to zero for the unordered list */
 21 .menu ul {
 22     padding:0;
 23     margin:0;
 24     list-style-type: none;
 25 }
 26 /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
 27 .menu ul li {
 28     float:left;
 29     position:relative;
 30 }
 31 /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
 32 .menu ul li a, .menu ul li a:visited {
 33     display:block;
 34     text-align:center;
 35     text-decoration:none;
 36     width:104px;
 37     height:30px;
 38     color:#000;
 39     background:#333333;
 40     line-height:30px;
 41     font-size:11px;
 42 }
 43 /* make the dropdown ul invisible */
 44 .menu ul li ul {
 45     display: none;
 46 }
 47 /* specific to non IE browsers */
 48 /* set the background and foreground color of the main menu li on hover */
 49 .menu ul li:hover a {
 50     color:#333333;
 51     background:#CCCCCC;
 52     font-weight:bold;
 53 }
 54 /* make the sub menu ul visible and position it beneath the main menu list item */
 55 .menu ul li:hover ul {
 56     display:block;
 57     position:absolute;
 58     top:31px;
 59     left:0;
 60     width:105px;
 61 }
 62 /* style the background and foreground color of the submenu links */
 63 .menu ul li:hover ul li a {
 64     display:block;
 65     background:#333333;
 66     color:#000;
 67 }
 68 /* style the background and forground colors of the links on hover */
 69 .menu ul li:hover ul li a:hover {
 70     background:#CCCCCC;
 71     color:#000000;
 72 }
 73 </style>
 74 </head>
 75 <body>
 76 <div class="main">
 77   <div class="menu">
 78     <ul>
 79       <li><a class="hide" href="#">首页</a>
 80 
 81         <ul>
 82           <li><a href="#" title="The zero dollar ads page">1</a></li>
 83           <li><a href="#" title="Wrapping text around images">2</a></li>
 84           <li><a href="#" title="Styling forms">3</a></li>
 85         </ul>
 86       </li>
 87       <li><a class="hide" href="#">学习理念</a>
 88 
 89         <ul>
 90           <li><a href="#" title="a coded list of spies">1</a></li>
 91           <li><a href="#" title="a horizontal vertical menu">2</a></li>
 92           <li><a href="#" title="an enlarging unordered list">3</a></li>
 93         </ul>
 94       </li>
 95       <li><a class="hide" href="#">研究与应用</a>
 96 
 97         <ul>
 98           <li><a href="#" title="Cross browser fixed layout">1</a></li>
 99           <li><a href="#" title="Cross browser fixed layout">2</a></li>
100           <li><a href="#" title="Cross browser fixed layout">3</a></li>
101         </ul>
102       </li>
103       <li><a class="hide" href="#">招新功能</a>
104 
105         <ul>
106           <li><a href="#" title="a coded list of spies">1</a></li>
107           <li><a href="#" title="a horizontal vertical menu">2</a></li>
108           <li><a href="#" title="an enlarging unordered list">3</a></li>
109         </ul>
110       </li>
111       <li><a class="hide" href="#">交流园地</a>
112 
113         <ul>
114           <li><a href="#" title="A drop down menu">1</a></li>
115           <li><a href="#" title="A cascading menu">2</a></li>
116           <li><a href="#" title="Using content:">3</a></li>
117           <li><a href="#" title=":hover applied to a div">4</a></li>
118           <li><a href="#" title="I can build a rainbow">5</a></li>
119 
120         </ul>
121       </li>
122       <li><a class="hide" href="#">内部管理</a>
123         <ul>
124           <li><a href="#" title="Example one">1</a></li>
125           <li><a href="#" title="Weft fonts">2</a></li>
126           <li><a href="#" title="Vertical align">3</a></li>
127 
128         </ul>
129       </li>
130       <li><a class="hide" href="#">联系我们</a>
131         <ul>
132           <li><a href="#" title="colour wheel">1</a></li>
133           <li><a href="#" title="a menu using opacity">2</a></li>
134           <li><a href="#" title="partial opacity">3</a></li>
135 
136         </ul>
137       </li>
138     </ul>
139     <div class="clear"> </div>
140   </div>
141 </div>
142 </body>
143 </html>