မိမိဘေလာ့ဂါကိုMenuအဆန္းေလးသံုးခ်င္သူမ်ားအတြက္ပါ
- မိမိဘေလာ့ကို၀င္ပါပီးရင္အေပၚကdesignဆိုတာနိပ္ပါပီးရင္ဒီေနာက္ကနာမည္ကိုသြားပါ> Layout ဆိုတာနိပ္ပါပီးရင္ေနာက္ကကုတ္ကိုနိပ္ပါ(Add a Gadget or Add a Page element)
- ပီးရင္က်လာတဲ့ေဘာက္စ္ကဒီကုတ္ကိုနိပ္ပါ( HTML/JavaScript)
- ဒီနာမည္ကိုနိပ္လိုက္ရင္ေဘာက္စ္ေလးတစ္ခုထြက္လာပါမယ္ HTML/JavaScript
- အဲ့လိုေဘာက္စ္ေလးက်လာပီဆိုရင္ေအာက္ကသံုးခ်င္တဲ့Menu codeကိုေကာ္ပီယူပီးHTML/JavaScript ဒီ်နာမည္ေဘာက္ထဲကိုထည့္လိုက္ပါ အားလံဲုးကိုလိုခ်င္သလိုကုတ္ေတြထည့္ပီပီးပီးဆိုရင္ေတာ့ေအာက္ဆံုးက(save)ဆိုတာနိပ္ပါမၾကိဴက္ရင္ျပန္ေျပာင္းယူလို႕လဲရပါတယ္
အဆင္ေျပက်ပါေစေနာ္ ....ေက်ာ္ေက်ာ္မိုး...ေအာက္မွာကုဒ္ကိုကူးက်ပါ 
<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
LinKေနရာမွာေတာ့လင့္တစ္ခုခုကိုအစားထိုးထည့္ေပးရမည္ေအာက္ကကုတ္ေတြလဲဒဇိ္လိုပဲအစားထံုးသံုးရမည္သူ႕နာမည္နဲ႕သူသာထည့္သံုးရပါမည္
<li><a href="#" ><span>Link n</span></a></li>
Finally do not forget to save and save. See the results on his blog.
Here's the code 30 horizontal tab navigation menu
MBT Navigation Menu #1
No Image Used
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
MBT Navigation Menu #2
No Image Used
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
MBT Navigation Menu #3
No Image Used
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
MBT Navigation Menu #4
No Image Used
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
MBT Navigation Menu #5
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1yJTXrOn_M6avylkfy5DNk4RRbDC2IrZHh9bX3uFsyEhTw4HG-Jth2CD45Q2dk6FykxRmEvADKRQFD1e2x3OBbFLS5IduTJLsOJGpnA3D5FuQUZLf3ZLsLkMC0_NCJl8Z1xesmbvJ5Hg/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #6
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVo3kaRQnn3JUD-7mJoZCu9kMQdN1GSflqQqYzelHYVzX8r5N1XoEpRFigxuBXTPTpLfp17S0gqhk9s6APOUkA4fsXcBlq3zX2ikZu-efJF73MvfP5y3ZyfeCkaZOoecP0YXzSHE-YVQU/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-A2XT7dY34AH1vs-PmXUCZmhdfZxB07d4lPQQDTt-VDPYKMbEec6BLnMnEfzBuNLWnSY5dC8WLM4HsQ904hgxraGF24ba6bZE4FIz08cas0-RAFLBW9wS3oeXqz64rmwHd6GncwSP58/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #7
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRP8liOsiieuEoaV3kQLR6gKWzes8KXiDDBNT-uy2F4DUOsQGQPN6QzAsxt0pN2vjkXTui-yRHJGHMFHOgM8C4v4mT_syMhbEld-zEkKQ8bH39krWEu0-0jovX8CHhm48HL5B1bHm_dI/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQLvg50NMGHaXefNvQQMoMcuxL0AQAQMHR9fQVga7MqcCVwywMMyqEK1hhA5fVZlG6SPrxKYyqg1pp6gDd3B8tdlBSG_UAqlxp7Rp0dwkdK9WzHsg-27DqD_cWAAyGia1XF0LQ2l1ZVg/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #8
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjssn-uxH2KCjkKe4fCxj4OsdHr2eCe3ZWRN1Bl957vEbUlXL9zZLDhLAhp3oRGU_Z2qJeg3Wv4qw3Yg-oR7Yx1b8vFGAsIiSQ_aZIVPmbGwmb9frzR_Gh-c8H11_wQw5ahqLBMN26Nk/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNlfVp7jwcM6pY8GUsBeNoX3O-L1cFPoZMUPv3dUTXUz0J-RITsxpiy1prDo5qwOTc19ZqUyoKFtUepfE0zKhk-1pygiiw9dDSDSBO9d6kMvFUQar0Nilh4J6M7fMo0NHTctEKJO_ziY/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #9
No Image Used
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #10
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh314fTlk4e26c-0Unhomzf5baiXnzUHTllgue0dTqgUk5ewZLuK2pJmOXWlwmEX96AaS5TjKZdbprE-b4_CWICD3nR9m-vqY3JPErCVfp2Xtxgzs9kHULH92W0qpQMaWRDFeaPTePntKs/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiqQ0lmdv2GkMeXRbtCq2nNFiDCiRdFbpNx26INQqWcVjolnIUWzQAeFy_Qf4iwMXY9eAWdLXyFmS2pBH5grdvDAzSSjNdUxEIhqzDhTGqiXGJfqutMY4r6RF2LtYLLKOZUx3-hW8UL0/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #11
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO7CW6o16pu8yqpFPjZSMC0cGol2ZphBVMLYa0hQVkNkLjfPUlsJjMCv-yYdzjwjMlNMgGSnuvhVlw325vKH-5f_y5LEWDXthPKwVF4mvxCGt-USdimK4rFFNXNcPbyDoKf-8uQwhRqEQ/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUsKthj2ubE5z5TTBCsm6nVjVpaAN1o-_YYlnJQRju9XmwoSlVCjqSwYa5-EyQLLo1nup6F2bQiLlzfSmn-AaxBNX8UsCxRbIKcWKbtthCkzfOfl9RZQcw0TXRJ3aXZ7ziEpSfXaQHgOk/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #12
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKY3cXpjnVPEuxFTp2eICGXAs2gBw9Q2WunmjwHnl6IQiQckrdvHSABsDjc-g_H9tKU9sefSaGqjmfYuQTOVk83MX9D9Yehf7juX3AZ-0uMX0_6B2RRaLjsh9vD8m1tvJDbftORpfgzVM/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKHsHyVEC7VtV7KZe-uyRlmj9umYZl3C7COFApwKXXbOUFlljQQhsZBEQeMEnuvYQ8iWS9Q4xqigWQnGoXwVFY1JgMEZQSKcSHHTbH1boaHv7erXJ9gr_tvRUq0EZc23rX35sOOTarD04/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #13
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6hJKzyVHhLGl_kU10InpAKO1a19j3KK9ZR_yW6xM28tlT4mnTSfraCeUKc78eyHJJWs-QWfbYeAuc1ZhOYq2qCxfKo8v8ddVWSoMWxT8stRRfVmz6l1dL69roaLaz1baNuVhdJmnyck/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHB7Xo0q9ndV4JNvqbH7uy7wzLi2UUnrAJ8kpzDR-pYnj-2i4896yRsh01KJtSl8VmQNnOXIYFF8UAH1NEDTRTgSn2TM0zfKdA4fo2f53p9wE9ZtubM2R2eOndO0WVVvegIDbpM1JuQVw/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #14
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKuMB_cl4NZ6RGXuQOaADgkhNKW7QPSiwJf0mdtXp40qEw2xxf-rEc-YYbOB3Wh283UScjruMftuf6476p-acMKjGmala8IqsOc2kQuDoq2_7dyOvzJq3U215xVUBFaL9ta0pzBy3I2n0/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Nrv2-uku1226q5L188KgK2ktsROGIKMm3poCmIk_gq6XxsARLzAUnnNkepd7DoJfy4j_XStsbbPeNhlWKj3Vf-UeaAh6SNEGdrm7077Igg1x9Bqph6Hso2NK4crqr_ikOfJik8A4Z-I/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #15
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYpDmxlK6NDQTqHKcqJPw5_LevLQNIapw2xg139Ky7NZffsn-XdDzD4vn7b3ijlCBi56MsxtNu_3cSnUb4ll_ERqKd62M6KR1w202Jorb6mw4mZY8UnIV108O01VJUHWZpxO439nP76c/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeThLGUqhXULoS6gPf677uVX01zieqQGiCUJGAdy8-8DPc0o4UoQLRNJCVtX4xQm_5be5nThDVl_5hGW8px7Tgt0chs26xoU4Rnuq1L3AWTvTZCntSNvCUFVKCdvaxmnIGGDdeVNOAb04/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #16
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRikDH0GrZHo1X2MbdOiIK1siDRTMMxcXOAA63YpbMfneykiALqcN0Tu7mlgjyrJackluSXXlO7-2cXU4E4n0n2mb8dPVXdAtF2wz2KPMNU9uyRD7TWnlAEnpEZ32DXDyv3hizj7xPJNs/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZ21SQS5-dnvTM8V3P2QNeiLD4BwuaipezSKQeqzo0i6aqdT_zzf-3xUvS2aDeIvAEjm7vhrJhG38hXjN_RS2bqkCgx7-nZZg5xRKHKfD30VOKzYZ7Em0EG9-zMSUBv8kXBssEuv0P70/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #17
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji-uYMuTfcqw_sOhrHH01sM77__S6jRDGisdO9L41U6sG-GcYsFjXzEukntzbzsUP5qtSn0xXZSKWI_rz0DR9ALEplmwW8K6Ixx71QLYYSNtCyTWQH8S9_HAySIoOWLtEoBWOCRmfcq3g/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxs0R0s2PqzBk18vSvm4a7vrVejpzWitCm9u1ul7LZ1qMXH3wFsODBOjG5DxWX2QazB7b94B7UDkzPrjIynrNR6dDmpTN5vD_uWOKGjD9xjjezL_Ofjdd3GeAH-xibZ2CWf3nPN_KG-4/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #18
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDw8e70t2sqomXZzeVUzNTPGnZUmLhSJu1Hhn5PprZ4VofqEYJwNd7-ZKckcQ461t_G1BQWOIpj787eAbiLZzLqNU2dGjraJb9nRMxfTLwV710k738QTWbnMnSqqhtvurZSwDXJaTfUE/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8o6VpILJCw7cf9npDacEsAPNcmmXKKJlLha-Bu_K58lJex-a7RXos2YZe1gmLHUVXKCRWYXN23mTArQxUjlJYWZqBiLI5ylEhCCA5EtLcf7SzvXyagFKJn8Y42k5cCPyqK3QGO-M6eU/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #19
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOi9XXAZsQVyZ2tqnQEbu-4hVfL6W8s_hWeVCC7BRZa21TQmPpP-FZm7npZOXbb8B0qTEx3znYS9C4NHfvvWuCowCMWysHUFamcLRDRJ-ATAI2H3PYxZCTgioRU0n8nZz5Seg2pA3v14/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcZbiIOeilcxGnuQNY2lKX7wOnccwb5f4gmRxF5wENQO2O7hjjwFFi5eWru02KLiRQHMDlwydkER5aLRS-TdewqNp8fzec6Hg26Xe-9MpwjAvXvl_JCQanSwRzl3ICCAyx3caz4EnRyI/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #20
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIMQ6B82NMsINaTy0jPp_TBJ2dUNl3PvX_u4WxD0zJib4Er8v2tW827aDfDbgXC4ZOgju4nFFaPeJzJIemoO-nAbFi06I-x7Jn3LN_5w8ui3EFk_0BXf8yjioHnUCKAS86MYhMlUDbNAM/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzmqryvOAunqislnpkus0PEGUiz-sN9c8uIL0PV2pth8gAhQzxzQFu2t3gH6weBJZjECkzHRkSPYDh8k2fsbj5LKGTbP33my93o_9gwsJtjxCYE8gxbUQXjmCscWZ3W8ZNHjL0FdSk1n8/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #21
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_KbWZ4qLC64hrrvQ9I_TFvoACaV9_sNRJX-rWD295b2P_tnXqpNGegeSarHpj29Uwj9iyFEoNHxYgdcr3AhXQ98qwokULoueL23GFqtlSkbWQ7OLoSe1Uf4UoMnzRRVchWAXzNxDpFH4/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcDQ5Tu1Oss5FiEi2cZOf_qLyOsCAci6fW-H_RdhcQJvcEXMNIO7zx0PaGKv0udLPkHmj4rx2u7-njNTXxlVM_68zfDtWAyqlentI6lovjcRulmlyyqk0mY16_d8OUTV0mZc1AHdTWq8E/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #22
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEHKboWzrCaW4se7ByT2P5ZkK8IU3yFSLlO1tbXs_CO5SDJUkTCRP9-xP94Q7GZHqk7ctUlGt0N9wjgOGGV3XTEXO6ovSZxpYGrJ2o8x_6UGeg6C0tx0DrPhOmHV2MYBXX38p4Hzgqh8/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHKyvh7JjezZeb-sBPXEnqJar7nQoegXQuP7CLQuGpixeiERUrkwEqqOnw53RNHeUomzGodF6UX0-ldslWpovmOM1YGIlWZhyphenhyphen300R9fDGsQ16k9p2orlTEOxMihpxk1bHFdD2h1nm8h0/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #23
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #24
No Image Used
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul> </div>
Tabs Menu #25
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwB9SkSj1AMzVhyphenhyphenctHOL_geQFq8PRtgFxmTK9jGsZuC7Kng0ApoKdb-Xbhweb38H5Z7v-0QjYJfhWUW8oP67IMrL1Y0q7NKS9LxMtLHn3LRvIJ_DQiKPNq3rYWk4M4RY-2bf-GConTC8/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3c9cHVVu7kaCMz3yA8o2UQHcVJA2ckjCSW6gJD2sraxnKxGwTZn56XaB5lYkTs6dcy_6EZgcS6d4ehmbgnaQLx1So_zpDT-tgUaXWKLGbbUq_UgG0DBiM0YRY1TCqyaEAWWc36UfP4-Q/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #26
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaslPcQjQHbupBgGdmOrSf-mNqRPvXS-3aVtkDYSVr5tHNvTHFeE2nZ9ZU9ai6N3vly3RQGTElXnHDzpsXptIwWt8Nd7q6lo-GrPeFaIsZ2aahuDeSaLOIUT1xwhFWfXo5zglheDY2rxg/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQQx70UREhHCMTPdxTg6to97sOB-G7b1859ep9wQIeiwC67TRORX5NwRelrl5_z3fAUsjQm3hNzfWMRBJIn9lZELt8zNGXjCN1yxH1oWleRbqurRJ91CjJgwCHFH-vm4oORozSvRp9VCE/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #27
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNm-bodlA8NU7f2YyNCW8wy949o-eLIPN8IGg3Y7XwYybVz_o4gu-ZAJKWOklLfej6OvdXRfNSLvwxFMX6typvXgGGfTOUhAQ_n5f760EGGJ38bO0JKZpf4tuznCrID4h56JGCnbVpe-k/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZjTIf76n9lGzDARGzqdPColqTuxGyKk24eskyR8VomSzNJt4R0Wn4M6IA94pAXznpq8Rc4smeR1d6_F9ygXVdJZBntpAQIp29lrXingyNCFsyVQdkhCF82HTXdsN-dY8jo9fHJGibnPE/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #28
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7u5NhX4oYTgmXOf-P8aH5T6vmtlrPtIpPk96r74a1Zdhgk2LpryzdwUgdfmzavGju0vyfCL5IPa_MIzooeG9xQJ6IDAIHT2VDvk9xWfp3YBLbEniRh7bYfjpyBSDKWGYDyTKxxIwwz8/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJpfZbVFmUMutQBkhI4xhD9sfAY4liz1Xrth0IfW29FTS789056OPpAsy-HjV4FCjWJ6bXP2l_34k6tt1X1Xy4zb559DVcZ9lS6b_I5x89xauiJLjlvAGQEaMuSqulz1kVIhd16BNp3tU/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #29
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdUN1izMExdMUd-jj61xbfcnRzqY_5fIDIois23HAdbQLN13UWsoG-Bkso07yBkwodnHe5N6gwtpT-Wat7vRSwKfmn4wzJ62js7oSOJIuxmBdyyQJDM7OiuN97nHdIZ-RADNOltcgCmk/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4dnb7xRtoJ8thYuxxlnp64zNE36qoi1zqyQ3ZHLn7iU2A9eSePKq1neW7wTSAVMrXbbo47A6ZYbacwp1WZJWiKBFbHuyq_B4EEGfsrypqnOGW3HpGjrxxwt0xDuxBPbEqm_G07fg2U8/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #30
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFQ2gp6cm46Ej2FJmxdoySZnNArZRyjy57l1p7LcbQbgNhbHGhL-FhJ584h_dIK24Yvh8cxLzphQqIpQ0zIkDVL4KehuBoEEmSdeGfmj9eaf6reHRQcNdK0VoFjTBH1HxH9Qsz9uP1mc/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsd12LUEQLQxBswLnC5RC5ErYoDLw6LYo8bJL8Abs2-RKBEB40a7PpcnPGhiFsE8UUhACTmCm0DrWSX1vKcyhp6j-plSyw68c3-KTH-RZUBUyK2Zu8anJ8gh_IOKYMNrkADnhsPymHzJk/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Tabs Menu #31
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style>
#menubar{background-color:#e1e1e1; padding:0; margin:0}
.btnmenu ul{font:15px verdana; padding:0; margin:0}
.btnmenu ul li{list-style:none; display:inline; padding:0; margin:0}
.btnmenu ul li a{padding:2px 20px; text-decoration:none; float:left; background-color:#e1e1e1; color:black; border:solid #e1e1e1; border-width:4px 1px; -webkit-border-radius:9px; -moz-border-radius:9px; border-radius:9px}
.btnmenu ul li a:hover{padding:1px 20px 3px 20px; background-color:#FFF; border-style:outset}
.btnmenu ul li a:active{padding:3px 20px 1px 20px; border-style:inset}
</style>
<div id='menubar'>
<div class='btnmenu'>
<ul id="navlist"><li><a href="#"><span>Link 1</span></a></li><li><a href="#"><span>Link 2</span></a></li><li><a href="#"><span>Link 3</span></a></li><li><a href="#"><span>Link 4</span></a></li><li><a href="#"><span>Link 5</span></a></li><li><a href="#"><span>Link 6</span></a></li></ul></div><div style='clear:both; '></div>
</div>
#menubar{background-color:#e1e1e1; padding:0; margin:0}
.btnmenu ul{font:15px verdana; padding:0; margin:0}
.btnmenu ul li{list-style:none; display:inline; padding:0; margin:0}
.btnmenu ul li a{padding:2px 20px; text-decoration:none; float:left; background-color:#e1e1e1; color:black; border:solid #e1e1e1; border-width:4px 1px; -webkit-border-radius:9px; -moz-border-radius:9px; border-radius:9px}
.btnmenu ul li a:hover{padding:1px 20px 3px 20px; background-color:#FFF; border-style:outset}
.btnmenu ul li a:active{padding:3px 20px 1px 20px; border-style:inset}
</style>
<div id='menubar'>
<div class='btnmenu'>
<ul id="navlist"><li><a href="#"><span>Link 1</span></a></li><li><a href="#"><span>Link 2</span></a></li><li><a href="#"><span>Link 3</span></a></li><li><a href="#"><span>Link 4</span></a></li><li><a href="#"><span>Link 5</span></a></li><li><a href="#"><span>Link 6</span></a></li></ul></div><div style='clear:both; '></div>
</div>
Tabs Menu #32
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style>
#bg_nav{background:#000; width:960px; height:29px; font-size:11px; font-family:Arial,Tahoma,Verdana; color:#FFF; font-weight:bold; margin:0px auto 0px; padding:0px; border-top:1px solid #333; border-bottom:1px solid #000; overflow:hidden}
#bg_nav a, #bg_nav a:visited{color:#FFF; font-size:11px; text-decoration:none; text-transform:uppercase; padding:0px 0px 0px 3px}
#bg_nav a:hover{color:#FFF; text-decoration:underline; padding:0px 0px 0px 3px}
#navleft{width:720px; float:left; margin:0px; padding:0px}
#navright{width:220px; font-size:11px; float:right; margin:0px; padding:6px 5px 0px 0px}
#navright a img{border:none; margin:0px; padding:0px}
#nav{margin:0px; padding:0px; list-style:none}
#nav ul{margin:0px; padding:0px; list-style:none}
#nav a, #nav a:visited{background:#222; color:#FFF; display:block; font-weight:bold; margin:0px; padding:8px 15px; border-left:1px solid #000}
#nav a:hover{background:#6e6d6d; color:#FFF; margin:0px; padding:8px 15px; text-decoration:none}
#nav li{float:left; margin:0px; padding:0px}
#nav li li{float:left; margin:0px; padding:0px; width:150px}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#333; width:160px; float:none; margin:0px; padding:7px 30px 7px 10px; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000}
#nav li li a:hover, #nav li li a:active{background:#666; padding:7px 30px 7px 10px}
#nav li ul{position:absolute; width:10em; left:-999em}
#nav li:hover ul{left:auto; display:block}
#nav li:hover ul, #nav li.sfhover ul{left:auto}
</style>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<li><a href="#"><span>Link 1</span></a></li><li><a href="#"><span>Link 2</span></a></li><li><a href="#"><span>Link 3</span></a></li><li><a href="#"><span>Link 4</span></a></li><li><a href="#"><span>Link 5</span></a></li><li><a href="#"><span>Link 6</span></a></li><li><a href="#"><span>Link 7</span></a></li></ul></div>
#bg_nav{background:#000; width:960px; height:29px; font-size:11px; font-family:Arial,Tahoma,Verdana; color:#FFF; font-weight:bold; margin:0px auto 0px; padding:0px; border-top:1px solid #333; border-bottom:1px solid #000; overflow:hidden}
#bg_nav a, #bg_nav a:visited{color:#FFF; font-size:11px; text-decoration:none; text-transform:uppercase; padding:0px 0px 0px 3px}
#bg_nav a:hover{color:#FFF; text-decoration:underline; padding:0px 0px 0px 3px}
#navleft{width:720px; float:left; margin:0px; padding:0px}
#navright{width:220px; font-size:11px; float:right; margin:0px; padding:6px 5px 0px 0px}
#navright a img{border:none; margin:0px; padding:0px}
#nav{margin:0px; padding:0px; list-style:none}
#nav ul{margin:0px; padding:0px; list-style:none}
#nav a, #nav a:visited{background:#222; color:#FFF; display:block; font-weight:bold; margin:0px; padding:8px 15px; border-left:1px solid #000}
#nav a:hover{background:#6e6d6d; color:#FFF; margin:0px; padding:8px 15px; text-decoration:none}
#nav li{float:left; margin:0px; padding:0px}
#nav li li{float:left; margin:0px; padding:0px; width:150px}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#333; width:160px; float:none; margin:0px; padding:7px 30px 7px 10px; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000}
#nav li li a:hover, #nav li li a:active{background:#666; padding:7px 30px 7px 10px}
#nav li ul{position:absolute; width:10em; left:-999em}
#nav li:hover ul{left:auto; display:block}
#nav li:hover ul, #nav li.sfhover ul{left:auto}
</style>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<li><a href="#"><span>Link 1</span></a></li><li><a href="#"><span>Link 2</span></a></li><li><a href="#"><span>Link 3</span></a></li><li><a href="#"><span>Link 4</span></a></li><li><a href="#"><span>Link 5</span></a></li><li><a href="#"><span>Link 6</span></a></li><li><a href="#"><span>Link 7</span></a></li></ul></div>
လိုခ်င္တာေတြအားလံုးျဖည့္ပီးရင္ေတာ့Saveကိုသာနိပ္ပါ
No comments:
Post a Comment