1
我有一個下拉菜單，看起來像這樣：如何創建具有動態寬度dropmenu
<ul class="menu">
<li id="home"><a href="index.php" title="Home" class="menu-item">Home</a></li>
<li class="list"><a href="#" title="About Us" class="menu-item">About</a>
<ul class="sub home">
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
</ul>
</li>
<li class="list"><a href="#" title="Support" class="menu-item">Support</a>
<ul class="sub home">
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
</ul>
</li>
<li class="list"><a href="#" title="Donate" class="menu-item">Donate</a></li>
<li class="list"><a href="#" title="Grants" class="menu-item">Grants</a>
<ul class="sub home">
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
</ul>
</li>
<li class="list"><a href="#" title="Contact Us" class="menu-item">Contact</a></li>
我使用jQuery如下創建下拉作用：
$('.menu .sub').css('display', 'none');
$('.menu li').hover(function() {
$(this).find('.sub').hide().stop(true, true).animate({
height: 'toggle'
}, {
duration: 200
});
}, function() {
$(this).find('.sub').show().stop(true, true).animate({
height: 'toggle'
}, {
duration: 200
});
});
而CSS是：
.menu {
font-size: 19px;
color: #3d393a;
position: relative;
z-index: 999;
}
.menu li.list{
position: relative;
}
.menu ul.sub{
text-transform: none;
position: absolute;
left: 0;
top: 25px;
list-style-type: none;
padding: 8px 10px;
margin: 0px;
margin-left: 10px;
font-size: 11px;
background-color: #fafaf8;
border-right:1px solid #e4e0d5;
border-left:1px solid #e4e0d5;
border-bottom:1px solid #e4e0d5;
color: #7e7a7a;
z-index: 99;
display: none;
}
.menu ul.sub li:hover{
}
.menu ul.sub li{
border-top: 1px dashed #7E7A7A;
display: block;
line-height: 140%;
padding: 8px 0;
}
.menu ul.sub>:first-child{
border-top: none;
}
我需要子項的寬度爲動態，並更改爲文本的正確寬度，以便它不會滾動到較長頁面標題上的兩行。我嘗試使用innerWidth，但我無法使它工作。