Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DDM</title>
</head>
<body>
  <div id="navigasi_menu">
  
<div class="navigasi_list">
    <div class="menu-main-menu-container"><ul class="menu" id="menu-main-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-6" id="menu-item-6"><a href="/">Home</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7" id="menu-item-7"><a href="#">Portfolio</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8" id="menu-item-8"><a href="#">Portfolio 1</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9" id="menu-item-9"><a href="#">Portfolio 2</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10" id="menu-item-10"><a href="#">Portfolio 3</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11" id="menu-item-11"><a href="#">Portfolio 4</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12" id="menu-item-12"><a href="#">Portfolio 5</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-349" id="menu-item-349"><a href="#">Category</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-245" id="menu-item-245"><a href="/?cat=3">Lifestyle</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-246" id="menu-item-246"><a href="/?cat=4">Interior</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-367" id="menu-item-367"><a href="/?cat=10">Examples</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-348" id="menu-item-348"><a href="#">Features</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343" id="menu-item-343"><a href="/?page_id=286">Shortcode</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-366" id="menu-item-366"><a href="/?p=351">Sample Images</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-378" id="menu-item-378"><a href="/?page_id=2">Sample Page</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-397" id="menu-item-397"><a href="/?p=146">Sample Comments</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14" id="menu-item-14"><a href="http://www.forum.com/">Support</a></li>
</ul></div> 
</div>
​
</div>
</body>
</html>
 
#navigasi_menu {
background:#ffffff;
height:45px;
width:1188px;
float:left;
display:block;
box-shadow:0px 1px 4px #000000;
border-bottom:1px solid #D4D4D4;
border-top:1px solid #D4D4D4;
z-index:9999;
}
​
.navigasi_list {
height:45px;
margin-left:0;
text-align:left;
}
​
.navigasi_list a {
color:#333333;
font-family:'bebasneueregular','Oswald','Helvetica Neue','Helvetica',Helvetica,Arial,sans-serif;
padding:0px 17px 0px 19px;
text-decoration:none;
}
​
#navigasi_menu ul {
list-style:none;
margin:0px;
padding:0px;
}
​
#navigasi_menu li {
border-right:2px solid #ffffff;
position:relative;
float:left;
font-size:25px;
height:45px;
}
​
#navigasi_menu li a {
line-height:2;
height:45px;
display:inline-block;
}
​
#navigasi_menu li:hover {
background:#999999;
float:left;
list-style:none;
}
​
#navigasi_menu ul li ul {
display:none;
float:left;
left:0;
position:absolute;
z-index:99999;
}
​
#navigasi_menu ul li ul li {
position:relative;
float:left;
font-size:23px;
min-width:220px;
  width: auto;
color:#ffffff;
border-right:0px;
}
​
#navigasi_menu ul li ul li:hover {
background:#333333;
color:#B2B2B2;
}
​
#navigasi_menu ul li ul li:hover a {
background:#333333;
color:#B2B2B2;
}
​
#navigasi_menu ul li:hover > ul {
display:block;
background:#999999;
border-top:5px solid #cccccc;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers