Drop Down Menu 重點在於絕對位置的利用，首先將第二層選單<ul>使用極大負數隱藏到瀏覽器可視範圍之外，當第一層選單滑鼠 hover 時，再將第二層的<ul>拉回來。
觀看範例
原始碼
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <link href="reset.css" media="screen, projection" rel="stylesheet" type="text/css"> | |
| <style type="text/css"> | |
| <!-- | |
| body { | |
| background: #fff; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 65%; | |
| color: #666; | |
| } | |
| a:link, a:visited { | |
| color: #333; | |
| text-decoration: none; | |
| } | |
| a:hover, a:active { | |
| color: #7FB03B; | |
| text-decoration: none; | |
| } | |
| .clearfix:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .clearfix { | |
| display:inline-block; | |
| } | |
| /* Hide from IE Mac \*/ | |
| .clearfix { | |
| display:block; | |
| } | |
| /* End hide from IE Mac */ | |
| #wrapper { | |
| width: 800px; | |
| margin: 0 auto; | |
| } | |
| /* ~~~~~~~~~~ HORIZONTAL NAV STYLE ~~~~~~~~~~ */ | |
| #header { | |
| margin-top: 20px; | |
| font-size: 120%; | |
| } | |
| .nav li { | |
| float: left; | |
| margin-right: 20px; | |
| font-size: 120%; | |
| font-weight: bold; | |
| position: relative; | |
| } | |
| .nav li a { | |
| float: left; | |
| display: block; | |
| height: 30px; | |
| } | |
| .nav li a.menu { | |
| background: url(down.gif) right 6px no-repeat; | |
| padding-right: 14px; | |
| } | |
| .nav li ul { | |
| position: absolute; | |
| top: 20px; | |
| left: -9999px; | |
| z-index: 999; | |
| overflow: hidden; | |
| border: 1px #eee solid; | |
| padding: 10px; | |
| } | |
| .nav li:hover ul { | |
| position: absolute; | |
| left: 0px; | |
| } | |
| .nav li ul li { | |
| font-size: 90%; | |
| font-weight: 400; | |
| margin-bottom: 6px; | |
| } | |
| .nav li ul li a { | |
| height: auto; | |
| } | |
| --> | |
| </style> | |
| <title>Drop Down Menu</title> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="header"> | |
| <div class="nav"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li> | |
| <a href="#" class="menu">Portfolio</a> | |
| <ul> | |
| <li><a href="#">website</a></li> | |
| <li><a href="#">print</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
2 則留言:
HI請教一下~
如果 .nav li ul 不要用 left:-9999px，改用display:none
等到.nav li:hover ul 時變成display:block
這樣可行嗎
可行的 =)
張貼留言