Customizable Drop Down Menu For A Side Bar

Monday, January 13, 2014

Customizable Drop Down Menu For A Side Bar

Edit the code in the edit window below,scroll to the bottom and replace our urls with yours and Change the link words. Then just copy the entire code and paste into a single html box for a sidebar-or just paste into the bottom or top of a post. Easy drop down menu anywhere! in html css!--Another style here in 3D Or Try Widgets Of Value Quad drop Down For Anywhere-Here

Scroll to the bottom to enter your links Edit this code:

<!--Do Not Edit Here-Your Links go at the

bottom-->
<style>
#wcdropdown{
  width:190;
  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:190px;
  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: 12px;
  background: #222222;
  color: #fff;
  width: 150px;
  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>

<!--Copy your url ours is!

Link 1 etc is then the words for your link Change the words popular and recommended to what you want-->

</li>
<li><a href="http://www,widgetsofvalue.com">Popular</a>
               <ul>
<li><a href="http://www.widgetsofvalue.com">Link 1</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 2</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 3</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 4</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 5</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 6</a></li>
</ul>
</li>
<li><a href="http://www.widgetsofvalue.com">Recommended</a>
               <ul>
<li><a href="http://www.widgetsofvalue.com">Link 1</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 2</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 3</a></li>
<li><a href="http://www.widgetsofvalue.com">Link 4</a></li>
</ul>
</li>
</ul>
</div>
</div>

Paste Your Code in the top window Preview is at the bottom
Test My Code

No comments:

How To Search A Web Page

Actual Visits To This Site As You Watch

Get Yours Here

Other Sites By Gary Graefen
Entertainment Thoughts And Concerns Of Gary Graefen
Minutia Matters
Shopp Sensation

Smart Phone News !

The Boon Dockers
Imperial Valley Gateway
Follow Gary's board Garys Blogs on Pinterest.
Join Pinterest And create your own widget FREE

Join Me On Facebook !

Shopp Electronics Enter Price And Item, This is a Custom Designed Engine With Specific Sites It Searches

The Key Words below can be searched
By hitting the cntrl-f keys. This brings up a browser search window. Type in your interest
and the links will be highlighted.
The Larger The Text The More Popular The Widget
Hard to read? Find your Browsers Zoom In!

Widgets Of Value

Please Help Others And Share

Monday, January 13, 2014