Как мне создать выпадающий список, используя 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')); 

Update:

В случае, если вы также хотели стиль по умолчанию выпадающий создан с помощью «выберите» CHECK Тэг эту ссылку.

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