Skip to content

Instantly share code, notes, and snippets.

@TearTheSky

TearTheSky/DropdownListSample.html

Created September 11, 2014 09:26
Download ZIP
Raw
DropdownListSample.html
<!-- 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