Widgets Of Value: Quad Drop Down Menu Widget

Thursday, September 11, 2014

Quad Drop Down Menu Widget

Use this cool as a cucumber drop down menu with your best links.
Eye catching and can be placed on a blog top or bottom, in a sidebar, anywhere on a web page
Just fill in your urls at the bottom of the code, and your link name.
You can change the background gif and fonts to

You can test your new menu with the html test button---->
Get your users to travel your site- Hosted background gifs here in a new window

Recommended Pages

Popular
- Link1
- Link2
- Link3
- Link4
- Link5
- Link6
Suggested
- Link1
- Link2
- Link3
- Link4

Popular
- Link1
- Link2
- Link3
- Link4
- Link5
- Link6
Suggested
- Link1
- Link2
- Link3
- Link4

Copy And Paste This Code

<style>
#wcdropdown{
width:100;
height:30px;
display:block;
padding:0;
margin:0 0 22px 0;
background:#222222;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}
#wcddmenu{
float:left;
width:100px;
height:35px;
display:block;
padding:0;
margin:0;
}
#wcddmenu ul{
float:left;
margin:0;
padding:0;
}
#wcddmenu li{
float:left;
list-style:none;
line-height:40px;
margin:0;
padding:0
}
#wcddmenu li a, #wcddmenu li a:link{
color:#dcdcdc;
display:block;
margin:0;
padding:0 10px;
text-decoration:none;
}
#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a {
color:#fff;
padding:0 10px;
background:#333333;
}
#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
font-size: 12px;
background: #222222;
color: #fff;
width: 100px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
border-bottom:1px solid #333333;
}
#wcddmenu li li a:hover, #wcddmenu li li a:active {
background: #333333;
color: #fff;
}
#wcddmenu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
left:auto
}
#wcddmenu li:hover, #wcddmenu li.sfhover{
position:static
}
</style><style>
#wcdropdown{
width:160;
height:40px;
display:block;
padding:0;
margin:0 0 22px 0;
background:#222222;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}
#wcddmenu{
float:left;
width:170px;
height:45px;
display:block;
padding:0;
margin:0;
}
#wcddmenu ul{
float:left;
margin:0;
padding:0;
}
#wcddmenu li{
float:left;
list-style:none;
line-height:40px;
margin:0;
padding:0
}
#wcddmenu li a, #wcddmenu li a:link{
color:#dcdcdc;
display:block;
margin:0;
padding:0 10px;
text-decoration:none;
}
#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a {
color:#fff;
padding:0 10px;
background:#333333;
}
#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
font-size: 14px;
background: #222222;
color: #fff;
width: 100px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
border-bottom:1px solid #333333;
}
#wcddmenu li li a:hover, #wcddmenu li li a:active {
background: #333333;
color: #fff;
}
#wcddmenu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
left:auto
}
#wcddmenu li:hover, #wcddmenu li.sfhover{
position:static
}
</style>

<tr background="http://oi45.tinypic.com/egpf2w.gif">
<td height="140">
<center>
 <small><font style="color: white; font-family: Verdana; font-weight: bold;" color="#999999">Recommended Pages</font></small><br>
</center>
<table style="width: 140px; height: 125px; text-align: left; margin-left: auto; margin-right: auto;" border="4" bordercolor="#000000">
<tbody>
<tr bgcolor="#ffffff">
<td style="background-color: rgb(102, 102, 204);">
<p align="center">
<br>
</p>
<div id="wcdropdown">
<div id="wcddmenu">
<ul>
<li>

</li>
<li><a href="">Popular</a>
<ul>
<li><a href="http://www.widgetsofvalue.com">Link1</a></li>
<li><a href="http://www.widgetsofvalue.com">Link2</a></li>
<li><a href="http://www.widgetsofvalue.com">Link3</a></li>
<li><a href="http://www.widgetsofvalue.com">Link4</a></li>
<li><a href="http://www.widgetsofvalue.com">Link5</a></li>
<li><a href="http://www.widgetsofvalue.com">Link6</a></li>
</ul>
</li>
<li><a href="">Suggested</a>
<ul>
<li><a href="http://www.widgetsofvalue.com">Link1</a></li>
<li><a href="http://www.widgetsofvalue.com">Link2</a></li>
<li><a href="http://www.widgetsofvalue.com">Link3</a></li>
<li><a href="http://www.widgetsofvalue.com">Link4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<p align="center">
 <br>
</p>
<div id="wcdropdown">
<div id="wcddmenu">
<ul>
<li>
</li>
<li><a href="">Popular</a>
<ul>
<li><a href="http://www.widgetsofvalue.com">Link1</a></li>
<li><a href="http://www.widgetsofvalue.com">Link2</a></li>
<li><a href="http://www.widgetsofvalue.com">Link3</a></li>
<li><a href="http://www.widgetsofvalue.com">Link4</a></li>
<li><a href="http://www.widgetsofvalue.com">Link5</a></li>
<li><a href="http://www.widgetsofvalue.com">Link6</a></li>
</ul>
</li>
<li><a href="http://www.widgetsofvalue.com">Suggested</a>
<ul>
<li><a href="http://www.widgetsofvalue.com">Link1</a></li>
<li><a href="http://www.widgetsofvalue.com">Link2</a></li>
<li><a href="http://www.widgetsofvalue.com">Link3</a></li>
<li><a href="http://www.widgetsofvalue.com">Link4</a></li>
</ul>
</li>
</ul>
</div>
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</p>

Widgets Of Value

Thursday, September 11, 2014

Quad Drop Down Menu Widget

Latest Articals From Toms Computer Hardware

Guides To Better Blogging

Pageviews

How To Search A Web Page

Key Words