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

I am unable to connect an external CSS file when Bootstrap is already linked

Having trouble with linking my external CSS file while also linking bootstrap. The CSS file doesn't seem to load when the bootstrap link is included, but it works if I comment out the bootstrap link. body { background-color: black; font-size: 2 ...

cssbootstrap-5

The Art of Repeating: Navigating through a Multi-Layered Array

My PHP Array looks like this: $fruits = array( array("Apple", 1.25), array("Banana", 0.86), ); Desired HTML Output: I want the HTML output to be formatted as follows: Fruit: Apple Price: 1.25 Fruit: Banana Price: 0.86 Attempts Made: I tried ...

htmlarraystwig

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

I'm currently working on implementing a navigation bar that allows users to switch between three components without having the navbar reload. The goal is for only the new component to load when the user clicks on a different section of the navbar, kee ...

htmlangulartypescriptcomponents

Animating an image in an HTML document by clicking a button through jQuery

I am trying to figure out how to make an image move from the left to the right of a page when a button is clicked. I thought the code below would work, but unfortunately, it's not functioning as expected. I'm new to JQuery and could use some guid ...

jqueryhtmlcss

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground

Having trouble advancing to the next page while attempting to web scrape

I'm currently working on scraping school data from a specific website. You can find the website here https://i.stack.imgur.com/iP37q.png. To start scraping, simply click on the "Cari Sekolah" button to navigate to the initial page. https://i.stack.i ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

htmlangulartypescriptnpm

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

Scenario: I'm facing a situation in my Angular project where I have a LoginFormComponent. This component has a form with two properties: email and password. My goal is to create properties within this component that can be accessed in the template. Th ...

htmlangularformsangular-forms

Using Python to access files

I have developed a system that allows me to load image files from HTML. However, after selecting a file and loading it from the front end, I am in need of a Python API to read the selected image file. How can I establish a connection between Python and HTM ...

pythonhtml

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

Typically, I have the following styles on my body: element.style { -webkit-app-region: drag; } However, when I interact with a md-select element (you can observe this behavior on the provided link), additional styles are applied. element.style { -w ...

javascripthtmlcssangularjsangular-material

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

javascripthtmlreactjstypescript

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

phpjavascripthtml

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

htmlcsscenter

What is the best way to emphasize a div depending on a query outcome?

A new application is in the works for a gaming project. This app is designed to display the location of a specific monster, utilizing a database containing information about monsters and their corresponding maps. Currently, the application functions almos ...

javascriptphpjquerycssajax

bootstrap for building responsive websites

I am trying to modify the width of an input from 100% to 50%, and position it in the center of the page so that it remains responsive when resizing the browser window. <!DOCTYPE html> <html> <head> <title>test</title&g ...

htmlcsstwitter-bootstrapinput

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

htmlcssipythonjupyter-notebook

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Center alignment is not possible for the Div element

Problem Every time I attempt to implement the following code (outlined below), the div only appears centered when using width: 100px;. <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; mar ...

javascripthtmlcsscenter