<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
Thursday, July 4, 2013
Tuesday, July 2, 2013
Drop Menu , sub menu (Kowsaar)
<div id='cssmenu'>
<ul>
<li><a
href='#'><span>Home</span></a></li>
<li
class='has-sub '><a href='#'><span>Products</span></a>
<ul>
<li
class='has-sub '><a href='#'><span>Product
1</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a
href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub '><a
href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</ul>
<li
class='has-sub '><a href='#'><span>Product
1</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a
href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</li>
</ul>
</li>
<li
class='has-sub '><a
href='#'><span>Services</span></a>
<ul>
<li class='has-sub '><a
href='#'><span>News </span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
</ul>
</li>
<li
class='has-sub '><a href='#'><span>History</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a
href='#'><span>About</span></a></li>
<li><a
href='#'><span>Contact</span></a></li>
<li><a
href='#'><span>Menu
1</span></a></li>
<li><a
href='#'><span>Menu
2</span></a></li>
<li><a
href='#'><span>Menu
3</span></a></li>
<li><a
href='#'><span>Menu
4</span></a></li>
</ul>
</div>
Drop Menu , sub menu
<div id='cssmenu'>
<ul>
<li><a
href='#'><span>Home</span></a></li>
<li
class='has-sub '><a href='#'><span>Products</span></a>
<ul>
<li
class='has-sub '><a href='#'><span>Product
1</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a
href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub '><a
href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</ul>
<li
class='has-sub '><a href='#'><span>Product
1</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a
href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
<li><a href='#'><span>Sub Product</span></a></li>
</li>
</ul>
</li>
<li
class='has-sub '><a
href='#'><span>Services</span></a>
<ul>
<li class='has-sub '><a
href='#'><span>News </span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
</ul>
</li>
<li
class='has-sub '><a href='#'><span>History</span></a>
<ul>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
<li><a href='#'><span>Sub
Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a
href='#'><span>About</span></a></li>
<li><a
href='#'><span>Contact</span></a></li>
<li><a
href='#'><span>Menu
1</span></a></li>
<li><a
href='#'><span>Menu
2</span></a></li>
<li><a
href='#'><span>Menu
3</span></a></li>
<li><a
href='#'><span>Menu
4</span></a></li>
</ul>
</div>
Subscribe to:
Comments (Atom)