Question

我有一个如下所示的下拉菜单：

<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，但我无法让它工作。

Answer 1

你可以使用white-space=nowrap css，它强制文本仅在1行。

.nowrap { 白色空间：nowrap }

然后应用class="nowrap"。

看看这个： http://www.icelab.eu/en/blog/css-4/css-nowrap-equivalent-8.htm

希望这会有所帮助。干杯

如何创建动态宽度的dropmenu

1 个答案: