Drop Down Menu, Menu CSS
[ Pobierz całość w formacie PDF ]
<style>.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/font: normal 13px Verdana;margin: 0;padding: 0;position: absolute;left: 0;top: 0;list-style-type: none;background: white;border: 1px solid black;border-bottom-width: 0;visibility: hidden;z-index: 100;}.ddsubmenustyle ul{margin: 0;padding: 0;position: absolute;left: 0;top: 0;list-style-type: none;border: 0px none;}.ddsubmenustyle li a{display: block;width: 170px; /*width of menu (not including side paddings)*/color: black;background-color: lightyellow;text-decoration: none;padding: 4px 5px;border-bottom: 1px solid black;}* html .ddsubmenustyle li{ /*IE6 CSS hack*/display: inline-block;width: 170px; /*width of menu (include side paddings of LI A*/}.ddsubmenustyle li a:hover{background-color: black;color: white;}.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/padding-left: 4px;border: 0;}.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/position: absolute;padding-top: 3px;left: 100px;border: 0;}.ddiframeshim{position: absolute;z-index: 500;background: transparent;border-width: 0;width: 0;height: 0;display: block;}/* ######### Black Strip Main Menu Bar CSS ######### */.mattblackmenu ul{margin: 0;padding: 0;font: bold 12px Verdana;list-style-type: none;border-bottom: 1px solid gray;background: #414141;overflow: hidden;width: 100%;}.mattblackmenu li{display: inline;margin: 0;}.mattblackmenu li a{float: left;display: block;text-decoration: none;margin: 0;padding: 6px 8px; /*padding inside each tab*/border-right: 1px solid white; /*right divider between tabs*/color: white;background: #414141;}.mattblackmenu li a:visited{color: white;}.mattblackmenu li a:hover{background: black; /*background of tabs for hover state */}.mattblackmenu a.selected{background: black; /*background of tab with "selected" class assigned to its LI */}</style><div class='mattblackmenu' id='ddtopmenubar'><ul><li><a href='#'>LINK1</a></li><li><a href='#' rel='ddsubmenu1'>LINK2</a></li><li><a href='#' rel='ddsubmenu2'>LINK3</a></li><li><a href='#'>Link4</a></li><li><a href='#' rel='ddsubmenu3'>LINK5</a></li></ul></div><script type='text/javascript'>ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")</script><ul class='ddsubmenustyle' id='ddsubmenu1'><li><a href='#'>LINK2 ITEM 1</a></li><li><a href='#'>LINK2 ITEM 2</a><ul><li><a href='#'>LINK2 ITEM 2.1</a></li><li><a href='#'>LINK2 ITEM 2.2</a></li></ul></li><li><a href='#'>LINK2 ITEM 3</a><ul><li><a href='#'>LINK2 ITEM 3.1</a></li></ul></li><li><a href='#'>LINK2 ITEM 4</a></li></ul><ul class='ddsubmenustyle' id='ddsubmenu2'><li><a href='#'>LINK3 ITEM 1</a></li><li><a href='#'>LINK3 ITEM 2</a></li><li><a href='#'>LINK3 ITEM 3</a><ul><li><a href='#'>LINK3 ITEM 3.1</a></li><li><a href='#'>LINK3 ITEM 3.2</a></li><li><a href='#'>LINK3 ITEM 3.3</a></li><li><a href='#'>LINK3 ITEM 3.4</a></li></ul></li><li><a href='#'>LINK3 ITEM 4</a></li><li><a href='#'>LINK3 ITEM 5</a><ul><li><a href='#'>LINK3 ITEM 5.1</a></li><li><a href='#'>LINK3 ITEM 5.2</a><ul><li><a href='#'>LINK3 ITEM 5.2 1</a></li><li><a href='#'>LINK3 ITEM 5.2 2</a></li><li><a href='#'>LINK3 ITEM 5.2 3</a></li></ul></li></ul></li><li><a href='#'>LINK3 ITEM 6</a></li></ul><ul class='ddsubmenustyle' id='ddsubmenu3'><li><a href='#'>LINK5 ITEM 1</a></li><li><a href='#'>LINK5 ITEM 2</a></li><li><a href='#'>LINK5 ITEM 3</a></li><li><a href='#'>LINK5 ITEM 4</a></li><li><a href='#'>LINK5 ITEM 5</a></li></ul>
[ Pobierz całość w formacie PDF ]