0

我正在创建一个具有下拉菜单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');
        }
    });
});
4

2 回答 2

0

不需要内联样式。看起来你缺少一个结束标签。如果您将 LI 向左浮动,您可以让它们水平排列。我假设你有 javascript 来完成其余的功能,但你会让 2 个 LI 像这样水平排列:

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

.click-nav ul > li 
{
    float: left;
    position:relative;
    list-style:none;
    cursor:pointer;
}
于 2013-07-02T17:59:15.433 回答
0

如果您在谈论 1 级导航项目,原因是因为您在with样式中有A标签。LIdisplay: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内联显示。

于 2013-07-02T17:50:41.990 回答