<!-- BEGIN MAIN NAV MENU--> 
<div id="gmenu"> 
<ul> 
<li><a href="/created/try" id="menu1" title="トライ">トライ</a></li> 
<li><a href="/created/tools" id="menu2" title="ツール">ツール</a></li> 
<li><a href="/created/sample" id="menu3" title="サンプル">サンプル</a></li> 
<li><a href="/created/toy" id="menu4" title="トーイ">トーイ</a></li> 

</ul> 
</div> 
<!-- END MAIN NAV MENU--> 
 
<!-- BEGIN HIDDEN DIV --> 
<div id="hidden-div1" class="hidden-div"> 
	<div id="hidden-div-left1" class="hidden-div-left"> 
	<h4>創ったmetaboyサンプル。<br />
　まだまだ少ないのですけど、着実に増やしてゆきますね。<br />
　・創ったmetaboy　＞　トライ</h4> 
	</div> 

	<div id="hidden-div-right1" class="hidden-div-right"> 
	<ul class="submenu"> 
	<li><a href="/created/try/honJp" title="HonJp">&raquo; HonJp</a></li> 
	<li><a href="/created/try/okonomirankings" title="OkonomiRankings">&raquo; OkonomiRankings</a></li> 
	<li><a href="/created/try/sameweather" title="SameWeather">&raquo; SameWeather</a></li> 
	</ul> 
	</div> 

</div> 
<!-- END HIDDEN DIV --> 
<!-- BEGIN HIDDEN DIV --> 
<div id="hidden-div2" class="hidden-div"> 
	<div id="hidden-div-left2" class="hidden-div-left"> 
	<h4>創ったmetaboyサンプル。<br />
　まだまだ少ないのですけど、着実に増やしてゆきますね。<br />
　・創ったmetaboy　＞　ツール</h4> 
	</div> 
・・・・・

#gmenu {
  width: 960px;
  height: 50px;
  width: 600px;
  height: 30px;
  background: #e9e9e9;
  clear: both;
}

.gline {
  width: 960px;
  width: 600px;
  height: 1px;
  margin: 40px 0;
  background: #ddd;
  overflow: hidden;
}

/* DIV MENU DEMO LIST STYLE */

#gmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gmenu ul li {
  display: inline;
}

#gmenu ul li a {
  float: left;
  display: block;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 50px;
  line-height: 30px;
  color: #888;
  text-decoration: none;
  margin: 0;
  padding: 0 30px;
}

#gmenu ul li a:hover, #gmenu ul li a.active  {
/*  color: #aaa; */
  color: #333333;
  text-decoration: none;
/*  background: #333; */
  background: #CBC85D;
}

/* HIDDEN DIV PANEL STYLE */

.hidden-div {
  position: absolute;
  width: 750px;
  height: 200px;
  margin: -1px 0 0 0;
  padding: 30px;
  background: #CBC85D;
  display: none;
  z-index: 100;

	border: 10px solid #CBC85D;
	background: #FFF;
	color: #6F6060;
}

/* HIDDEN DIV PANEL - CONTENT INSIDE */

.hidden-div-left {
  float: left;
  width: 350px;
  height: 250px;
/*  color: #fff; */
	color: #6F6060;

}
.hidden-div-left h4{
  color: #4A6147;
  line-height: 120%;
  font-size: 1.5em;
}
.hidden-div-left h3{
  color: #4A6147;
  line-height: 120%;
  font-size: 1.4em;
}

.hidden-div-right {
  float: right;
  width: 350px;
  height: 250px;
}

.hidden-div-right ul {
  margin: 10px 0 0 0;
  padding: 20px;
  list-style: none;
  background: #EAE77C;
  overflow: hidden;
/*  font-size:14px; */
}

.hidden-div-right ul li a {
  display: block;
  font-size: 1.3em;
  line-height: 1.0em;
  color: #21381E;
  text-decoration: none;
  margin: 0;
  padding: 11px 0;
}

.hidden-div-right ul li a:hover {
  color: #3A640B;
  text-decoration: none;
}

$(document).ready(function() {
        var hide1 = false; var hide2 = false; var hide3 = false; var hide4 = false;
        // Shows the DIV on hover with a fade in
        $("#menu1").hover(function(){         
           if (hide1) clearTimeout(hide1);
            $("#hidden-div1").fadeIn();  
            // The main nav menu item is assigned the 'active' CSS class
            $(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
            hide1 = setTimeout(function() {$("#hidden-div1").fadeOut("fast");});
            $("#menu1").removeClass("active");
        });
        // Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div1").hover(function(){
            if (hide1) clearTimeout(hide1);
            $("#menu1").addClass("active");        
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
            hide1 = setTimeout(function() {$("#hidden-div1").fadeOut("fast");});
            $("#hidden-div1").stop().fadeIn();
            $("#menu1").removeClass("active");
        });

        $("#menu2").hover(function(){         
           if (hide2) clearTimeout(hide2);
            $("#hidden-div2").fadeIn();  
            // The main nav menu item is assigned the 'active' CSS class
            $(this).addClass("active");
        }, function() {
            // Fades out the DIV and removes the 'active' class from the main nav menu item
            hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
            $("#menu2").removeClass("active");
        });
        // Ensures the DIV displays when your mouse moves away from the main nav menu item
        $("#hidden-div2").hover(function(){
            if (hide2) clearTimeout(hide2);
            $("#menu2").addClass("active");        
        }, function() {
            // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
            hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
            $("#hidden-div2").stop().fadeIn();
            $("#menu2").removeClass("active");
        });
・・・・・