跳到主文
部落格全站分類：收藏嗜好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Free CSS Vertical Menu Designs at exploding-boy.com</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 80%; font-weight: bold; background: #FFF; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*- Menu 1--------------------------- */ #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(menu1.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 2--------------------------- */ #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(menu2.gif) 0 -32px; padding: 8px 0 0 32px; } /*- Menu 3--------------------------- */ #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(menu3.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 4--------------------------- */ #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(menu4.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 5--------------------------- */ #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(menu5.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 6--------------------------- */ #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover { color: #FFF; background: url(menu6.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 7--------------------------- */ #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(menu7.gif) 0 -32px; padding: 8px 0 0 30px; } /*- Menu 8--------------------------- */ #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556; display: block; background: url(menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(menu8.gif) 0 -32px; padding: 8px 0 0 20px; } /*- Menu 9--------------------------- */ #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(menu9.gif) 0 -32px; padding: 8px 0 0 35px; } /*- Menu 10--------------------------- */ #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(menu10.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 11--------------------------- */ #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(menu11.gif) 0 -32px; padding: 8px 0 0 27px; } /*- Menu 12--------------------------- */ #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(menu12.gif) 0 -32px; padding: 10px 0 0 35px; } /*- Menu 13--------------------------- */ #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(menu13.gif) 0 -32px; padding: 8px 0 0 10px; } /*- Menu 14--------------------------- */ #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #333; display: block; background: url(menu14.gif); padding: 8px 0 0 10px; } #menu14 li a:hover { color: #FFF; background: url(menu14.gif) 0 -32px; padding: 8px 0 0 10px; } </style> </head> <body> <div> <a href="http://www.exploding-boy.com" mce_href="http://www.exploding-boy.com"><img src="http://www.exploding-boy.com/images/ebhead.gif" mce_src="http://www.exploding-boy.com/images/ebhead.gif" alt="ExplodingBoy - Home" /></a> </div> <h2>Tab Menu 1</h2> <div id="menu1"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 2</h2> <div id="menu2"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 3</h2> <div id="menu3"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 4</h2> <div id="menu4"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 5</h2> <div id="menu5"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 6</h2> <div id="menu6"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 7</h2> <div id="menu7"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 8</h2> <div id="menu8"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 9</h2> <div id="menu9"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 10</h2> <div id="menu10"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 11</h2> <div id="menu11"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 12</h2> <div id="menu12"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 13</h2> <div id="menu13"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> <h2>Tab Menu 14</h2> <div id="menu14"> <ul> <li><a href="#1" mce_href="#1" title="Link 1">Link 1</a></li> <li><a href="#2" mce_href="#2" title="Link 2">Link 2</a></li> <li><a href="#3" mce_href="#3" title="Link 3">Link 3</a></li> <li><a href="#4" mce_href="#4" title="Link 4">Link 4</a></li> <li><a href="#5" mce_href="#5" title="Link 5">Link 5</a></li> </ul> </div> <br /> </body> </html>
綠色‧奇蹟
AlwaysAndy 發表在 痞客邦 留言(0) 人氣()
留言列表
留言列表
網頁設計 (5)
