ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが
メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。
しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。
この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは
できるのでしょうか。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#header-wrapper {
height: 60px;
}
#header {
height: 60px;
}
#site-title {
padding: 10px 0 0 0;
}
h5 {
margin-top: 20px;
}
#main {
clear: left;
margin: 20px auto;
padding: 5px 20px;
width: 900px;
}
h3 {
font-size: 20px;
}
#sample ul {
list-style:none;
}
#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: 600px;
background: #eee;
border: solid 1px #ccc;
}
#menu li ul li {
float:left;
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 type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">
$(function() {
$("#menu li").hover(function()
{
$(this).children('ul').show();
//$('#menu li ul').css('width', '200px');
}, function() {
$(this).children('ul').hide();
});
});
</script>
</head>
<body class="archive date col-2-right fixed loggedin browser-chrome">
<div id="page">
<div id="main">
<div id="sample">
<ul id="menu">
<li id="menu1">メニュー1
<ul>
<li><a href="#">サブメニュー1-1</a></li>
</ul>
</li>
<li id="menu2">メニュー2
<ul>
<li><a href="#">サブメニュー2-1</a></li>
<li><a href="#">サブメニュー2-2</a></li>
</ul>
</li>
<li id="menu3">メニュー3
<ul>
<li><a href="#">サブメニュー3-1</a></li>
<li><a href="#">サブメニュー3-2</a></li>
<li><a href="#">サブメニュー3-3</a></li>
<li><a href="#">サブメニュー3-4</a></li>
</ul>
</li>
</ul>
</div>
</div><!--main-->
</div><!--page-->
</body>
</html>
