Question

我正在创建一个下拉菜单，其下拉列表为on-click（而不是hover）。我找到了这个很棒的剧本，但我似乎无法获得水平排列的链接。我无法弄清楚这是定位还是别的什么。我尝试添加浮动和内联样式，但都没有工作。

CSS

.click-nav 
{
width:150px;
border-top: 5px solid #333;
border-bottom: 5px solid #333;
position: relative;
z-index: 9999;
}

.click-nav ul 
{
position:relative;
font-weight:900; 
}

.click-nav ul li 
{
position:relative;
list-style:none;
cursor:pointer;
}

.click-nav ul li ul 
{
position:absolute;
left:0;
right:0;
}

.click-nav ul .clicker 
{
position:relative;
background:#FFF;
color:#333;
text-transform:uppercase;
}
.click-nav ul .clicker:hover,.click-nav ul .active 
{
background:#333;
color: #FFF;
}

 .click-nav img 
{
position:absolute;top:9px;left:12px;
}

.click-nav ul li a 
{
transition:background-color 0.2s ease-in-out;-webkit-transition:background-color      0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;      
display:block;
padding:8px 10px 8px 40px;
background:#333;
color:#FFF;
text-decoration:none;
}

.click-nav ul li a:hover 
{
background:#333;
color: #d48f3a;
}

/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}

HTML

<div class="click-nav">
<ul class="no-js">
    <li>
        <a href="#" class="clicker">music</a>
        <ul>
        <li><a href="#">Featured Music</a></li>
        <li><a href="#">CDs</a></li>
        <li><a href="#">Vinyl</a></li>
        </ul>
        <li>
        <a href="#" class="clicker">movies</a>
        <ul>
        <li><a href="#">Featured Movies</a></li>
        <li><a href="#">DVDs</a></li>
        <li><a href="#">Blu-Ray</a></li>
        <li><a href="#">3D Blu-Ray</a></li>
        </ul>
    </li>

</ul>

</div>

jQuery脚本

$(function () {
    // Clickable Dropdown
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function (e) {
        $('.click-nav .js ul').slideToggle(200);
        $('.clicker').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function () {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});

Answer 1

如果您正在讨论第1级导航项，原因是因为A范围内的LI标记为display:block样式。

.click-nav ul li a 
{
transition:background-color 0.2s ease-in-out;-webkit-transition:background-color      0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;      
display:block;
padding:8px 10px 8px 40px;
background:#333;
color:#FFF;
text-decoration:none;
}

更新

http://jsfiddle.net/nsjtB/1/

摆脱display:block，因为它跨越整个宽度并限制LI显示为内联。

Answer 2

无需内联样式。看起来你错过了一个结束标签。如果你漂浮左边的LI，你可以让它们水平排列。我假设你有其他功能的javascript，但你会得到2个LI水平排列如下：

http://jsfiddle.net/74x6N/8/

.click-nav ul > li 
{
    float: left;
    position:relative;
    list-style:none;
    cursor:pointer;
}

jQuery下拉菜单不会水平放置

2 个答案:

更新