Widgets Of Value: 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

Widgets Of Value

Monday, January 13, 2014

Customizable Drop Down Menu For A Side Bar

Latest Articals From Toms Computer Hardware

Guides To Better Blogging

Pageviews

How To Search A Web Page

Key Words