Show the final element in a list in a new and innovative style

How can I style the last item of a list differently?

The issue is with the display of the last item in the list, which may go out of bounds on smaller screens. To ensure proper display, the list item "Argenti" needs to be shown in a single column.

To achieve this, I need to override a part of the CSS styling for "Argenti".

Here is the code snippet responsible for creating three subcolumns:

li > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}


(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('<span class="submenu-button"></span>');
     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() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);
* {
    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 > 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 > ul > li {
    display: inline-block;
    text-align: center
}

#cssmenu > ul > li > a {
    padding: 17px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ddd;
    font-weight: 700;
}

#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
    color: #fff
}

#cssmenu > ul > 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 > ul > li.has-sub > a {
    padding-right: 30px
}

#cssmenu > ul > li.has-sub > a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu > ul > li.has-sub > 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 > ul > li.has-sub:hover > 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 > ul {
    left: auto
}

#cssmenu li:hover > ul > 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 > a,
#cssmenu ul ul li.last-item > a {
    border-bottom: 0
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
    color: ##28b8d8
}

#cssmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu ul ul li.has-sub > 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 > li.has-sub:hover > 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 > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active> a {
    border-top: 1px solid #333
}

li > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="cssmenu">
<div id="head-mobile"> Le Marche</div>
<div class="button"></div>
<ul>
<li><a href="#">Gioielli</a>
          <ul>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/annamaria-cammilli/">Annamaria Cammilli</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/baraka/">Baraka</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/cervera-barcellona/">Cervera Barcelona</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/chimento/">Chimento</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/comete-gioielli/">Comete Gioielli</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/crivelli/">Crivelli</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/filo-della-vita/">Filo Della Vita</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/fope-2/">Fope</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/giorgio-visconti/">Giorgio Visconti</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/gucci-gioielli/">Gucci</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/le-bebe-gioielli/">le Bebè</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/marco-bicego/">Marco Bicego</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/polello/">Polello</a></li> 
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/salvini/">Salvini</a></li>
            <li><a href="http://www.orafivenetiassociati.ennestudio.net/world-diamond-group/">World Diamond Group</a></li>
          </ul>
</li>
<li><a href="#">Bijoux & fashion jewels</a>
   <ul>
     <li><a href="http://www.orafivenetiassociati.ennestudio.net/gucci-argento/">Gucci Argento</a> </li>
     <li><a href="http://www.orafivenetiassociati.ennestudio.net/pandora/">Pandora</a></li>
     <li><a href="http://www.orafivenetiassociati.ennestudio.net/yvone-christa-n-y/">Yvone Christa N.Y.</a></li>
   </ul>
</li>
<li><a href="#">Orologi</a>
      <ul>
       <li><a href="http://www.orafivenetiassociati.ennestudio.net/citizen/">Citizen</a> </li>
       <li><a href="http://www.orafivenetiassociati.ennestudio.net/gucci-time/">Gucci Time</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/tissot/">Tissot</a> </li>
      </ul>
</li>
<li><a href="#">Argenti</a>
      <ul>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/carlo-moretti/">Carlo Moretti</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/greggio/">Greggio</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/le-bebe/">Le Bebè</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/ottaviani/">Ottaviani</a> </li>
      <li><a href="http://www.orafivenetiassociati.ennestudio.net/sovrani/">Sovrani</a> </li>
  <li><a href="http://www.orafivenetiassociati.ennestudio.net/venini/">Venini</a> </li>
      
      </ul>
</li>
</ul>
</nav>
</header>
<section style="padding-top:20px;font:bold 44px arial;color:#68D800;">

</section>

I have provided the link to view the full code https://jsfiddle.net/1trtbdag/

htmlcsshtml-listscss-multicolumn-layout

Answer №1

Tip: Try using the last-child pseudo-class selector.

li > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

li:last-child > ul {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}

Check out the updated example here: https://jsfiddle.net/1trtbdag/14/

Another solution could be a mix of last-child and not pseudo-class selectors.

li:not(:last-child) > ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

Here's the updated version on fiddle: https://jsfiddle.net/1trtbdag/15/

Please note that these solutions will apply to all list elements in your document. To make it specific to just the site menu, consider adding an ID or class to target only that section in your CSS selectors, like this:

ul#menu > li:not(:last-child) > ul
.

To explore more CSS selectors, visit https://www.w3.org/TR/selectors/#selectors

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting image hues in Internet Explorer?

I have successfully altered the colors of PNG images in Chrome and Firefox using CSS3. Here is my code: #second_image{ -webkit-filter: hue-rotate(59deg); filter: hue-rotate(59deg); } <img src='http://i.im ...

javascriptjquerycssinternet-explorer

What is the process for detaching and attaching click animations using the on() method?

I am encountering an issue with a recursive loop that executes a simple animation. These animations are controlled by the page load and clicking on controls .carousel_item. Click here for live sample JSFiddles for demonstration purposes Challenge: The pr ...

javascriptjqueryhtml

Creating interactive labels in a histogram that update based on the user's input

Currently, I have operational code in place that takes input data and generates a histogram based on set thresholds. When the code is executed, the histogram changes dynamically as the threshold slider is adjusted. However, there seems to be an issue wit ...

javascriptjqueryhtmld3.jsplottable

Utilizing HTML and JavaScript to Download Images from a Web Browser

I'm interested in adding a feature that allows users to save an image (svg) from a webpage onto their local machine, but I'm not sure how to go about doing this. I know it can be done with canvas, but I'm unsure about regular images. Here i ...

javascripthtmlimage

A JavaScript alert function that triggers no matter the return value

An alert is being sent by a function when a radio box's value returns as null, even though it should have a value that is not null. The issue lies in another function on the page that hides the tables where these radios are located, making it difficul ...

javascriptjqueryhtmlasp-classic

The white-space property disrupts the normal width of elements

My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...

htmlcssoverflowword-wrap

Preventing text from wrapping around an image: tips and tricks

I've been struggling to prevent text from wrapping around an image on my webpage. Despite various attempts like enclosing the image and text in separate <div> elements, setting both the <img> and <div> to display as block, and even t ...

htmlcssword-wrap

What is causing a scroll bar to appear at the bottom even though my content is not overflowing?

Here is the situation I am trying to describe: http://jsfiddle.net/CvgFS/1/ My English skills are not strong enough to explain it clearly, but I hope you can see why I am getting a scroll bar even though the content fits the page. This issue is happening o ...

htmlcss

Tips for safeguarding registration forms against spamming

The ASP.NET/Mono MVC2 E-shop includes a registration form that requests mandatory customer name, address, phone password (entered twice) and some optional fields. Should we add spam protection to the form? The current setup verifies that the password and ...

asp.nethtmlasp.net-mvcformsasp.net-mvc-2

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

javascripthtmlangularjsdate

Android experiencing issues with dynamically loading Border XML

I am having trouble setting a border dynamically for a RelativeLayout. Oddly enough, when I manually add the border in the activity XML file, it displays perfectly. However, when I try to generate the border dynamically, it doesn't appear. border.xml ...

androidcssxmlandroid-layout

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

Lately, I've been facing some challenges and my objective is to change the color of the thumb label on my v-slider to a custom one that is defined in the component's design. Can anyone provide guidance on how to achieve this? Regards, Joost ...

cssvue.jsvuetify.jstextcolorv-slider

Selenium cannot find iFrames

I've come across various suggestions about transitioning to iframes such as driver.switchTo().frame("test frame"); and driver.switchTo().defaultContent(); Yet, I'm having trouble navigating to MenuFrame 4 in the following code. I am utilizing Ja ...

javahtmlseleniumiframe

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

javascriptcssreactjstypescriptreact-native

Tips for incorporating background color with CSS pseudo-elements

I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...

cssreactjs

Display a custom error message containing a string in an Angular error alert

How can I extract a specific string from an error message? I'm trying to retrieve the phrase "Bad Request" from this particular error message "400 - Bad Request URL: put: Message: Http failure response for : 400 Bad Request Details: "Bad Request ...

javascripthtmlangulartypescript

What is the best way to apply CSS styles to different states in React?

I am endeavoring to adjust the size of an element by utilizing this code snippet. const [size, setSize] = useState({}); The initial size I wish to set is: transform: scale(1, 1) translate3d(0, 0, 0); Upon clicking on the element, my aim is to enlarge it ...

cssreactjsstate

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

htmlcssreactjsmaterial-designmaterial-ui

What are the steps for implementing this javascript code in an HTML document?

Recently, I've been seeking advice on how to address the issue of wanting a button click to automatically select the search box on my website. Suggestions have pointed towards using Javascript for this functionality, with the following code recommend ...

javascriptjqueryhtml

Storing geographic locations in a variable by inputting an address

Currently, I am working on a feature that allows users to input a location and then convert it into longitude and latitude coordinates. These coordinates will be stored in a variable called latlng instead of using preset coordinates. Right now, I have a fu ...

javascriptjqueryhtmlforms