html - 如何使用 Less 设置下拉菜单的样式？

Question

我的 HTML 代码如下:

<div class="nav-collapse" uib-collapse="isCollapsed" style="position: absolute;">
    <ul class="nav">
        <li><a ui-sref="#"><span class="overview">Overview</span></a></li>
        <li class="divider"></li>
        <li><a ui-sref="#"><span class="dashboard">More PV Dashboards</span></a>      </li>
        <li class="divider"></li>
        <li><a ui-sref="#">Wave</a></li>
        <li class="divider"></li>
        <li><a ui-sref="#">W/S Omni</a></li>
        <li class="divider"></li>
        <li><a ui-sref="#">Site Analyser</a></li>
        <li class="divider"></li>
        <li><a ui-sref="#">Spotzer</a></li>
        <li class="divider"></li>
        <li><a ui-sref="#">iPromote</a></li>
        <li class="divider"></li>
        <li><a ui-sref="#">BW Reports</a></li>
        <li class="divider"></li>
        <li><a ui-sref="#"><span class="change-customer">Change Customer</span></a></li>
    </ul>
</div>

我的 CSS 代码如下:

.nav-collapse {
     margin-top: 5px;
     padding: 0px;
      background-color: #ccc;
      z-index: 5000;
      width: 200px;
       .nav {
         li {
           display: list-item;
           list-style-type: square;
           margin-left: 47px;
           color: #000;
           .listitem(1);
            a {
            color: #006493;
            font-size: 13px;
            padding-left: 0;
            span{
              font-size: 14px;
              font-family: 'Open Sans'semibold;
              color: #000;
             }
            }
            &.divider {
            margin: 1px 1px;
            border-bottom: 1px solid #000;
            opacity: 0.2;
            list-style-type: none;
          }
         }
         .listitem(@i){
           &:nth-child(@{i}){
             background-color: #fff;
             opacity: 0.8;
             list-style-type: none;
           }
           &:last-of-type{
             list-style-type: none;
           }
         }
        }
      }

Answer 1

通过查看您的问题，您现在似乎想知道如何在 UL 的帮助下创建自定义下拉列表。 http://jsfiddle.net/elclanrs/H63MU/希望此链接会有所帮助。

var ulSelect = function($select) {

    // $select.hide();
    var $opts = $select.find('option');

    return (function() {
        var items = '',
            html = '';
        $opts.each(function() {
            items += '<li><a href="#" class="item">' + $(this).text() + '</a></li>';
        });
        html = 
            '<ul class="menu">'+ 
                '<li class="sub">'+
            '<a class="sel" href="#">'+ $opts.filter(':selected').text() +'</a>' +
                    '<ul>' + items + '</ul>'+
                '</li>'+
            '</ul>';
        $(html)
            .find('.sub a')
            .click(function(e) {
                e.preventDefault();
                var $this = $(this);
                $this.parents('.menu').find('.sel').text($this.text());
                $opts.eq($this.parent().index()).prop('selected', true);
            }).end().insertAfter($select);
    }());

};

ulSelect($('#select'));

更新:

如果您还想设置使用“select”标签创建的默认下拉菜单的样式，请查看此链接。

https://www.sitepoint.com/community/t/how-do-i-style-this-drop-down-box/103484/2