Created
September 11, 2014 09:26
-
-
Save TearTheSky/29bb80f0c18cd3dc74dc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- HTML内埋め込み --> | |
<style type="text/css"> | |
<!-- | |
#menu li { | |
position: relative; | |
float: left; | |
margin: 0; | |
padding: 5px; | |
width: 200px; | |
height: 20px; | |
border: solid 1px #ccc; | |
font-weight: bold; | |
} | |
#menu li:hover { | |
color: #fff; | |
background: #333; | |
} | |
#menu li ul { | |
display: none; | |
position: absolute; | |
top: 30px; | |
left: -1px; | |
padding: 5px; | |
width: 200px; | |
background: #eee; | |
border: solid 1px #ccc; | |
} | |
#menu li ul li { | |
margin: 0; | |
padding: 0; | |
width: 200px; | |
border: none; | |
} | |
#menu li ul li a { | |
display: inline-block; | |
width: 200px; | |
height: 20px; | |
} | |
#menu li ul li a:hover { | |
background: #999; | |
color: #fff; | |
} | |
--> | |
</style> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> | |
<body> | |
<ul id="menu"> | |
<li>メニュー1 | |
<ul> | |
<li><a href="#">サブメニュー1-1</a></li> | |
<li><a href="#">サブメニュー1-2</a></li> | |
<li><a href="#">サブメニュー1-3</a></li> | |
</ul> | |
</li> | |
<li>メニュー2 | |
<ul> | |
<li><a href="#">サブメニュー2-1</a></li> | |
<li><a href="#">サブメニュー2-2</a></li> | |
<li><a href="#">サブメニュー2-3</a></li> | |
</ul> | |
</li> | |
<li>メニュー2 | |
<ul> | |
<li><a href="#">サブメニュー2-1</a></li> | |
<li><a href="#">サブメニュー2-2</a></li> | |
<li><a href="#">サブメニュー2-3</a></li> | |
</ul> | |
</li> | |
<li>メニュー1 | |
<ul> | |
<li><a href="#">サブメニュー1-1</a></li> | |
<li><a href="#">サブメニュー1-2</a></li> | |
<li><a href="#">サブメニュー1-3</a></li> | |
</ul> | |
</li> | |
<li>メニュー2 | |
<ul> | |
<li><a href="#">サブメニュー2-1</a></li> | |
<li><a href="#">サブメニュー2-2</a></li> | |
<li><a href="#">サブメニュー2-3</a></li> | |
</ul> | |
</li> | |
<li>メニュー2 | |
<ul> | |
<li><a href="#">サブメニュー2-1</a></li> | |
<li><a href="#">サブメニュー2-2</a></li> | |
<li><a href="#">サブメニュー2-3</a></li> | |
</ul> | |
</li> | |
</ul> | |
</body> | |
<script> | |
$("#menu li").hover(function() { | |
$(this).children('ul').show(); | |
}, function() { | |
$(this).children('ul').hide(); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment