title: Display last item of a list in different way
body: <p>How can I display the last item of a list in a different way?</p>
  
  <p><a href="http://www.orafivenetiassociati.ennestudio.net/le-marche/" rel="nofollow noreferrer">http://www.orafivenetiassociati.ennestudio.net/le-marche/</a></p>
  
  <p>The problem is that the 3 first elements are ok, but the last one goes out of the body and in a small screen the item would not be displayed.
  So the list "Argenti" has to be displayed in a single column.</p>
  
  <p>So, I must make "Argenti" ignore a portion of CSS.</p>
  
  <p>At the moment, this portion of code creates the three subcolumns:</p>
  
  <pre><code>li &gt; ul {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  $.fn.menumaker = function(options) {  
   var cssmenu = $(this), settings = $.extend({
     format: "dropdown",
     sticky: false
   }, options);
   return this.each(function() {
     $(this).find(".button").on('click', function(){
       $(this).toggleClass('menu-opened');
       var mainmenu = $(this).next('ul');
       if (mainmenu.hasClass('open')) { 
         mainmenu.slideToggle().removeClass('open');
       }
       else {
         mainmenu.slideToggle().addClass('open');
         if (settings.format === "dropdown") {
           mainmenu.find('ul').show();
         }
       }
     });
     cssmenu.find('li ul').parent().addClass('has-sub');
  multiTg = function() {
       cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button"&gt;&lt;/span&gt;');
       cssmenu.find('.submenu-button').on('click', function() {
         $(this).toggleClass('submenu-opened');
         if ($(this).siblings('ul').hasClass('open')) {
           $(this).siblings('ul').removeClass('open').slideToggle();
         }
         else {
           $(this).siblings('ul').addClass('open').slideToggle();
         }
       });
     };
     if (settings.format === 'multitoggle') multiTg();
     else cssmenu.addClass('dropdown');
     if (settings.sticky === true) cssmenu.css('position', 'fixed');
  resizeFix = function() {
    var mediasize = 700;
       if ($( window ).width() &gt; mediasize) {
         cssmenu.find('ul').show();
       }
       if ($(window).width() &lt;= mediasize) {
         cssmenu.find('ul').hide().removeClass('open');
       }
     };
     resizeFix();
     return $(window).on('resize', resizeFix);
   });
    };
  })(jQuery);
  
  (function($){
  $(document).ready(function(){
  $("#cssmenu").menumaker({
     format: "multitoggle"
  });
  });
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
      text-decoration: none
  }
  
  body {
      background: #555;
  }
  
  header {
      position: relative;
      width: 100%;
      background: #333;
  }
  
  .logo {
      position: relative;
      z-index: 123;
      padding: 10px;
      font: 18px verdana;
      color: #6DDB07;
      float: left;
      width: 15%
  }
  
  .logo a {
      color: #6DDB07;
  }
  
  nav {
      position: relative;
      width: 100%;
      margin: 0 auto;
      text-align: center
  }
  
  #cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a,
  #cssmenu #head-mobile {
      border: 0;
      list-style: none;
      line-height: 1;
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
  }
  
  #cssmenu:after,
  #cssmenu &gt; ul:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0
  }
  
  #cssmenu #head-mobile {
      display: none
  }
  
  #cssmenu {
      font-family: sans-serif;
      background: #333
  }
  
  #cssmenu &gt; ul &gt; li {
      display: inline-block;
      text-align: center
  }
  
  #cssmenu &gt; ul &gt; li &gt; a {
      padding: 17px;
      font-size: 12px;
      letter-spacing: 1px;
      text-decoration: none;
      color: #ddd;
      font-weight: 700;
  }
  
  #cssmenu &gt; ul &gt; li:hover &gt; a,
  #cssmenu ul li.active a {
      color: #fff
  }
  
  #cssmenu &gt; ul &gt; li:hover,
  #cssmenu ul li.active:hover,
  #cssmenu ul li.active,
  #cssmenu ul li.has-sub.active:hover {
      background: #28b8d8!important;
      -webkit-transition: background .3s ease;
      -ms-transition: background .3s ease;
      transition: background .3s ease;
  }
  
  #cssmenu &gt; ul &gt; li.has-sub &gt; a {
      padding-right: 30px
  }
  
  #cssmenu &gt; ul &gt; li.has-sub &gt; a:after {
      position: absolute;
      top: 22px;
      right: 11px;
      width: 8px;
      height: 2px;
      display: block;
      background: #ddd;
      content: ''
  }
  
  #cssmenu &gt; ul &gt; li.has-sub &gt; a:before {
      position: absolute;
      top: 19px;
      right: 14px;
      display: block;
      width: 2px;
      height: 8px;
      background: #ddd;
      content: '';
      -webkit-transition: all .25s ease;
      -ms-transition: all .25s ease;
      transition: all .25s ease
  }
  
  #cssmenu &gt; ul &gt; li.has-sub:hover &gt; a:before {
      top: 23px;
      height: 0
  }
  
  #cssmenu ul ul {
      position: absolute;
      left: -9999px
  }
  
  #cssmenu ul ul li {
      height: 0;
      -webkit-transition: all .25s ease;
      -ms-transition: all .25s ease;
      background: #333;
      transition: all .25s ease
  }
  
  #cssmenu ul ul li:hover {}
  
  #cssmenu li:hover &gt; ul {
      left: auto
  }
  
  #cssmenu li:hover &gt; ul &gt; li {
      height: 35px
  }
  
  #cssmenu ul ul ul {
      margin-left: 100%;
      top: 0
  }
  
  #cssmenu ul ul li a {
      border-bottom: 1px solid rgba(150, 150, 150, 0.15);
      padding: 11px 15px;
      width: 170px;
      font-size: 12px;
      text-decoration: none;
      color: #ddd;
      font-weight: 400;
  }
  
  #cssmenu ul ul li:last-child &gt; a,
  #cssmenu ul ul li.last-item &gt; a {
      border-bottom: 0
  }
  
  #cssmenu ul ul li:hover &gt; a,
  #cssmenu ul ul li a:hover {
      color: ##28b8d8
  }
  
  #cssmenu ul ul li.has-sub &gt; a:after {
      position: absolute;
      top: 16px;
      right: 11px;
      width: 8px;
      height: 2px;
      display: block;
      background: #ddd;
      content: ''
  }
  
  #cssmenu ul ul li.has-sub &gt; a:before {
      position: absolute;
      top: 13px;
      right: 14px;
      display: block;
      width: 2px;
      height: 8px;
      background: #ddd;
      content: '';
      -webkit-transition: all .25s ease;
      -ms-transition: all .25s ease;
      transition: all .25s ease
  }
  
  #cssmenu ul ul &gt; li.has-sub:hover &gt; a:before {
      top: 17px;
      height: 0
  }
  
  #cssmenu ul ul li.has-sub:hover,
  #cssmenu ul li.has-sub ul li.has-sub ul li:hover {
      background: #363636;
  }
  
  #cssmenu ul ul ul li.active a {
      border-left: 1px solid #333
  }
  
  #cssmenu &gt; ul &gt; li.has-sub &gt; ul &gt; li.active &gt; a,
  #cssmenu &gt; ul ul &gt; li.has-sub &gt; ul &gt; li.active&gt; a {
      border-top: 1px solid #333
  }
  
  li &gt; ul {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header&gt;
  &lt;nav id="cssmenu"&gt;
  &lt;div id="head-mobile"&gt; Le Marche&lt;/div&gt;
  &lt;div class="button"&gt;&lt;/div&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Gioielli&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/annamaria-cammilli/"&gt;Annamaria Cammilli&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/baraka/"&gt;Baraka&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/cervera-barcellona/"&gt;Cervera Barcelona&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/chimento/"&gt;Chimento&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/comete-gioielli/"&gt;Comete Gioielli&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/crivelli/"&gt;Crivelli&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/filo-della-vita/"&gt;Filo Della Vita&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/fope-2/"&gt;Fope&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/giorgio-visconti/"&gt;Giorgio Visconti&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/gucci-gioielli/"&gt;Gucci&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/le-bebe-gioielli/"&gt;le Bebè&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/marco-bicego/"&gt;Marco Bicego&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/polello/"&gt;Polello&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/salvini/"&gt;Salvini&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/world-diamond-group/"&gt;World Diamond Group&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bijoux &amp; fashion jewels&lt;/a&gt;
     &lt;ul&gt;
       &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/gucci-argento/"&gt;Gucci Argento&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/pandora/"&gt;Pandora&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/yvone-christa-n-y/"&gt;Yvone Christa N.Y.&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Orologi&lt;/a&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/citizen/"&gt;Citizen&lt;/a&gt; &lt;/li&gt;
         &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/gucci-time/"&gt;Gucci Time&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/tissot/"&gt;Tissot&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Argenti&lt;/a&gt;
        &lt;ul&gt;
        &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/carlo-moretti/"&gt;Carlo Moretti&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/greggio/"&gt;Greggio&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/le-bebe/"&gt;Le Bebè&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/ottaviani/"&gt;Ottaviani&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/sovrani/"&gt;Sovrani&lt;/a&gt; &lt;/li&gt;
     &lt;li&gt;&lt;a href="http://www.orafivenetiassociati.ennestudio.net/venini/"&gt;Venini&lt;/a&gt; &lt;/li&gt;
        
        &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  &lt;section style="padding-top:20px;font:bold  44px arial;color:#68D800;"&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I leave the link to all the code <a href="https://jsfiddle.net/1trtbdag/" rel="nofollow noreferrer">https://jsfiddle.net/1trtbdag/</a></p>