<style>
#demo_menu li {
cursor: pointer;
width: 100px;
}
#demo_menu li:hover {
background-color: #CCC;
}
#demo_menu li ul {
display: none;
}
</style>
<script>
$(document).ready(function(){
$("#demo_menu li").hover(function() {
$(this).children('ul').slideDown();
}, function() {
$(this).children('ul').hide();
});
});
</script>
<div class="c full b1 gra1">
<div class="t"><span>オンマウスで自前プルダウン PC専用</span></div>
<ul id="demo_menu" class="v">
<li>メニュー１
<ul>
<li>サブメニュー１</li>
<li>サブメニュー２</li>
<li>サブメニュー３</li>
</ul>
</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</div>
<style>
#demo_menu2 li {
cursor: pointer;
width: 100px;
}
#demo_menu2 li:hover {
background-color: #CCC;
}
#demo_menu2 li ul {
display: none;
}
</style>
<script>
$(document).ready(function(){
$("#demo_menu2 li").hover(function() {
$(this).children('ul').slideDown();
$(this).children('ul').css('position','absolute');
tl = $(this).position().left;
tw = $(this).width();
tlw = tl+tw;
$(this).children('ul').css('left',tlw+'px');
tt = $(this).position().top;
$(this).children('ul').css('top',tt+'px');
}, function() {
$(this).children('ul').hide();
});
});
</script>
<div class="c full b1 gra1">
<div class="t"><span>オンマウスで自前プルダウン（横に展開） PC専用</span></div>
<ul id="demo_menu2" class="v">
<li>メニュー１
<ul>
<li>サブメニュー１</li>
<li>サブメニュー２</li>
<li>サブメニュー３</li>
</ul>
</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</div>
<style>
#demo_menu3 li {
padding: 5px;
cursor: pointer;
width: 100px;
background-color: #eee;
}
#demo_menu3 li:hover {
background-color: #CCC;
}
#demo_menu3 li ul {
display: none;
}
</style>
<script>
$(document).ready(function(){
$("#demo_menu3 li p").click(function() {
if ( $(this).hasClass("act") ){ //toggle
//$('#demo_menu3 li').removeClass('act'); // init
//$('#demo_menu3 li ul').hide(); // init
}else{
$('#demo_menu3 li p').removeClass('act'); // init
$('#demo_menu3 li ul').hide(); // init
$(this).addClass('act');
//$(this).children('ul').slideDown();
$(this).parent().children('ul').slideDown();
$(this).parent().children('ul').css('position','absolute');
tl = $(this).parent().position().left;
tw = $(this).parent().width();
tlw = tl+tw+10;// +padding
$(this).parent().children('ul').css('left',tlw+'px');
tt = $(this).parent().position().top;
$(this).parent().children('ul').css('top',tt+'px');
}
});
$("#demo_menu3 li").hover(function() {
}, function() {
});
});
</script>
<div class="c full b1 gra1">
<div class="t"><span>クリックで自前プルダウン スマフォを考慮</span></div>
<ul id="demo_menu3" class="v">
<li><p>メニュー１</p>
<ul>
<li>サブメニュー 1-1</li>
<li>サブメニュー 1-2</li>
<li>サブメニュー 1-3</li>
</ul>
</li>
<li><p>メニュー２</p>
<ul>
<li>サブメニュー 2-1</li>
<li>サブメニュー 2-2</li>
</ul>
</li>
<li><p>メニュー３</p>
<ul>
<li>サブメニュー 3-1</li>
</ul>
</li>
</ul>
</div>