分享几种CSS制作菜单列表的方法

2023-04-12 11:20:01html-css012

分享几种CSS制作菜单列表的方法,第1张

<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ul{ 8 list-style: none 9 }10 .nav>li{11 float: left12 }13 ul a{14 display: block15 text-decoration: none16 width: 100px17 height: 50px18 text-align: center19 line-height: 50px20 color: white21 background-color: #2f3e4522 }23 .nav>li:first-child a{24 border-radius: 10px 0 0 10px25 }26 .nav>li:last-child a{27 border-radius: 0 10px 10px 028 }29 .drop-down{30 /*position: relative*/31 }32 .drop-down-content{33 padding: 034 display: none35 /*position: absolute*/36 }37 38 h3{39 font-size: 30px40 clear: both41 }42 .drop-down-content li:hover a{43 background-color:red44 }45 .nav .drop-down:hover .drop-down-content{46 display: block47 }48 </style>49 </head>50 <body>51 <ul class="nav">52 <li><a href="#">下拉菜单</a></li>53 <li class="drop-down"><a href="#">下拉菜单</a>54 <ul class="drop-down-content">55 <li><a href="#">我是1</a></li>56 <li><a href="#">我是2</a></li>57 <li><a href="#">我是3</a></li>58 </ul>59 </li>60 <li><a href="#">下拉菜单</a></li>61 <li><a href="#">下拉菜单</a></li>62 <li><a href="#">下拉菜单</a></li>63 </ul>64 <h3>我是测试文字</h3>65 </body>66 </html>

你这个要求，css也就是做下菜单样式，关键的点击后切换到相应二级菜单部分必须靠js。

百度：js tab 切换，把里面的onmouseover改成onclick就行了。

纯CSS的下拉菜单，我理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden）。大致意思就是如此。我对这些也不能说特别精通。网上倒是有很多倒子的。

贴一段网上摘的纯CSS下拉菜单（二级）

<!DOCTYPE HTML>

<html>

<head>

<title>利用float制作兼容ie6纯css下来菜单</title>

* { margin:0padding:0}

ul { list-style:none}

a:hover {color:#555}

.nav { float:leftoverflow:hiddentext-align:centerfont-size:14px}

.nav dd { float:leftwidth:300pxmargin:-888px -150px 0 0}

.nav dd a { float:leftmargin-top:888pxdisplay:blockposition:relativebackground:#eeewidth:150pxheight:30pxline-height:30pxborder-bottom:1px solid #fff}

.nav a:hover { margin-right:1pxbackground:#3cf}

.nav dd ul { float:leftfont-size:0z-index:888}

.nav dd li a { clear:leftwidth:150pxmargin-top:0font-size:14px}

.nav dd li a:hover { margin-right:1px}

</style>

</head>

<body>

<dd>

<ul>

</ul>

</dd>

<dd>