!DOCTYPE html html head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title css菜單演示 /title style type= text/css * {margin: 0;padding: 0;border: 0;}body {font-family: arial, 宋體, serif;font-size: 12px;}#nav {line-height: 24px;list-style-type: none;background: #666;}#nav a {display: block;width: 80px;text-align: center;}#nav a:link {color: #666;text-decoration: none;}#nav a:visited {color: #666;text-decoration: none;}#nav a:hover {color: #FFF;text-decoration: none;font-weight: bold;}#nav li {float: left;width: 80px;background: #CCC;}#nav li a:hover {background: #999;}#nav li ul {line-height: 27px;list-style-type: none;text-align: left;left: -999em;width: 180px;position: absolute;}#nav li ul li {float: left;width: 180px;background: #F6F6F6;}#nav li ul a {display: block;width: 180px;w/idth: 156px;text-align: left;padding-left: 24px;}#nav li ul a:link {color: #666;text-decoration: none;}#nav li ul a:visited {color: #666;text-decoration: none;}#nav li ul a:hover {color: #F3F3F3;text-decoration: none;font-weight: normal;background: #C00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left;}-- /style script type= text/javascript function menuFix() { var sfEls = document.getElementById( nav ).getElementsByTagName( li for (var i=0; i sfEls.length; i++) { sfEls[i]. unction() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onMouseDown=function() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onMouseUp=function() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp( ( ?|^)sfhover//b ), 
window.onload=menuFix; /script /head body ul id= nav  li a href= # 產(chǎn)品介紹 /a ul li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li /ul  /li  li a href= # 服務(wù)介紹 /a ul li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二服務(wù)二 /a /li li a href= # 服務(wù)二服務(wù)二服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li /ul  /li  li a href= # 成功案例 /a ul li a href= # 案例三 /a /li li a href= # 案例 /a /li li a href= # 案例三案例三 /a /li li a href= # 案例三案例三案例三 /a /li /ul  /li  li a href= # 關(guān)于我們 /a ul li a href= # 我們四 /a /li li a href= # 我們四 /a /li li a href= # 我們四 /a /li li a href= # 我們四111 /a /li /ul  /li  li a href= # 在線演示 /a ul li a href= # 演示 /a /li li a href= # 演示 /a /li li a href= # 演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示演示演示演示 /a /li /ul  /li  li a href= # 聯(lián)系我們 /a ul li a href= # 聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li /ul  /li /ul /body /html 

2、變成水平方向

 !DOCTYPE html html head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title css菜單演示 /title style type= text/css * {margin: 0;padding: 0;border: 0;}body {font-family: arial, 宋體, serif;font-size: 12px;}#nav {line-height: 24px;list-style-type: none;background: #666;width: 80px;}#nav a {display: block;width: 80px;text-align: center;}#nav a:link {color: #666;text-decoration: none;}#nav a:visited {color: #666;text-decoration: none;}#nav a:hover {color: #FFF;text-decoration: none;font-weight: bold;}#nav li {/*float: left*/; width: 80px;background: #CCC;}#nav li a:hover {background: #999;}#nav li ul {line-height: 27px;list-style-type: none;text-align: left;left: -999em;width: 180px;position: absolute;}#nav li ul li {float: left;width: 180px;background: #F6F6F6;}#nav li ul a {display: block;width: 180px;w/idth: 156px;text-align: left;padding-left: 24px;}#nav li ul a:link {color: #666;text-decoration: none;}#nav li ul a:visited {color: #666;text-decoration: none;}#nav li ul a:hover {color: #F3F3F3;text-decoration: none;font-weight: normal;background: #C00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#nav li.sfhover a {float: left;}#content {clear: left;}-- /style script type=text/javascript function menuFix() { var sfEls = document.getElementById( nav ).getElementsByTagName( li for (var i=0; i sfEls.length; i++) { sfEls[i]. unction() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onMouseDown=function() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onMouseUp=function() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp( ( ?|^)sfhover//b ), 
window.onload=menuFix; /script /head body ul id= nav  li a href= # 產(chǎn)品介紹 /a ul li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li /ul  /li  li a href= # 服務(wù)介紹 /a ul li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二服務(wù)二 /a /li li a href= # 服務(wù)二服務(wù)二服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li /ul  /li  li a href= # 成功案例 /a ul li a href= # 案例三 /a /li li a href= # 案例 /a /li li a href= # 案例三案例三 /a /li li a href= # 案例三案例三案例三 /a /li /ul  /li  li a href= # 關(guān)于我們 /a ul li a href= # 我們四 /a /li li a href= # 我們四 /a /li li a href= # 我們四 /a /li li a href= # 我們四111 /a /li /ul  /li  li a href= # 在線演示 /a ul li a href= # 演示 /a /li li a href= # 演示 /a /li li a href= # 演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示演示演示演示 /a /li /ul  /li  li a href= # 聯(lián)系我們 /a ul li a href= # 聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li /ul  /li /ul /body /html 

3、彈簧式

 !DOCTYPE html html head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title css菜單演示 /title style type= text/css * {margin: 0;padding: 0;border: 0;}body {font-family: arial, 宋體, serif;font-size: 12px;}#nav {line-height: 24px;list-style-type: none;background: #666;width: 80px;}#nav a {display: block;width: 80px;text-align: center;}#nav a:link {color: #666;text-decoration: none;}#nav a:visited {color: #666;text-decoration: none;}#nav a:hover {color: #FFF;text-decoration: none;font-weight: bold;}#nav li {/*float: left*/; width: 80px;background: #CCC;}#nav li a:hover {background: #999;}#nav li ul {line-height: 27px;list-style-type: none;text-align: left;left: -999em;width: 80px;position: absolute;}#nav li ul li {float: left;width: 80px;background: #F6F6F6;}#nav li ul a {display: block;width: 80px;w/idth: 56px;text-align: left;padding-left: 24px;}#nav li ul a:link {color: #666;text-decoration: none;}#nav li ul a:visited {color: #666;text-decoration: none;}#nav li ul a:hover {color: #F3F3F3;text-decoration: none;font-weight: normal;background: #C00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;position: static;}#content {clear: left;} /style script type=text/javascript function menuFix() { var sfEls = document.getElementById( nav ).getElementsByTagName( li for (var i=0; i sfEls.length; i++) { sfEls[i]. unction() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onMouseDown=function() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onMouseUp=function() { this.className+=(this.className.length 0? : ) + sfhover  sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp( ( ?|^)sfhover//b ), 
window.onload=menuFix; /script /head body ul id= nav  li a href= # 產(chǎn)品介紹 /a ul li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li li a href= # 產(chǎn)品一 /a /li /ul  /li  li a href= # 服務(wù)介紹 /a ul li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li li a href= # 服務(wù)二服務(wù)二 /a /li li a href= # 服務(wù)二服務(wù)二服務(wù)二 /a /li li a href= # 服務(wù)二 /a /li /ul  /li  li a href= # 成功案例 /a ul li a href= # 案例三 /a /li li a href= # 案例 /a /li li a href= # 案例三案例三 /a /li li a href= # 案例三案例三案例三 /a /li /ul  /li  li a href= # 關(guān)于我們 /a ul li a href= # 我們四 /a /li li a href= # 我們四 /a /li li a href= # 我們四 /a /li li a href= # 我們四111 /a /li /ul  /li  li a href= # 在線演示 /a ul li a href= # 演示 /a /li li a href= # 演示 /a /li li a href= # 演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示 /a /li li a href= # 演示演示演示 /a /li li a href= # 演示演示演示演示演示 /a /li /ul  /li  li a href= # 聯(lián)系我們 /a ul li a href= # 聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li li a href= # 聯(lián)系聯(lián)系聯(lián)系 /a /li /ul  /li /ul /body /html 

菜單制作的方式多種多樣，這次先給大家分享這幾種，如大家有好的建議和菜單效果，可以在下方回復(fù)給我，大家共同學(xué)習(xí)一下。

以上就是分享幾種CSS制作菜單列表的方法的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。