New 2

- See more at: http://www.helperblogger.com/2012/06/create-multi-level-drop-down-menu-in.html#sthash.ynIqQ2aj.dpuf

Thursday, July 4, 2013

Drop menu - sub menu Good ,use it



<script src='http://code.helperblogger.com/dd-level-menu.js' type='text/javascript'></script> <style> /* ######### Drop Down Menu Bu HelperBlogger.com ######### */ /* ######### Matt Black Strip Main Menu Bar CSS ######### */ .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 id="ddtopmenubar" class="mattblackmenu"> <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> - See more at: http://www.helperblogger.com/2012/06/create-multi-level-drop-down-menu-in.html#sthash.76CUwPYB.dpuf



No comments:

Post a Comment