We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36582
    • 463 Posts
    It would be wonderful if someone could help me with this as I’m stuck!

    I have a horizontal menu with 6 titles and each has a dropdown. The children of the dropdown items display to the right of their parent, on hover, which is perfect apart from the last item that I want to align to the left so it doesn’t go off page.

    I think this is the bit of CSS I need to duplicate (from assets/snippets/wayfinder/examples/cssplay/dropdown.css) and adjust but I can’t get my head round how to do it?

    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:161px; top:0;}


    Somewhere I need left:-161px; but only applied to the last item.

    Many thanks in advance.
      Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk
      • 1169
      • 312 Posts
      I think you need CSS with a class "last" with the necessary code as below:-

      /* -------------------------------------------------- */
      /* metaltop-gold */
      /* -------------------------------------------------- */
      #metaltop-gold {
      	clear:left;
      	float:left;
      	padding:0;
      	background:#CBC396 url(metaltop-gold.gif) top repeat-x;
      	border-bottom:1px solid #7E7567;
      	width:100%;
      	border-top:4px solid #000;
      	overflow:hidden;
      	font-family:Verdana, sans-serif;
      }
      #metaltop-gold ul {
      	float:left;
      	margin:0;
      	padding:0;
      	list-style:none;
      	position:relative;
      	left:50%;
      	text-align:center;
      }
      #metaltop-gold ul li {
      	display:block;
      	float:left;
      	list-style:none;
      	margin:0;
      	padding:0;
      	position:relative;
      	right:50%;
      }
      #metaltop-gold ul li.first {
      	border-left:1px solid #7E7567;
      }
      #metaltop-gold ul li.last {
      	border-right:1px solid #ECE9D8;
      }
      #metaltop-gold ul li a {
      	display:block;
      	float:left;
      	margin:0;
      	padding:20px 10px 6px 10px;
      	border-left:1px solid #ECE9D8;
      	border-right:1px solid #7E7567;
      	text-decoration:none;
      	color:#7D6A46;
      	font-size:.8em;
      	font-weight:bold;
      	text-transform:uppercase;
      	line-height:1.3em;
      }
      #metaltop-gold ul li a:hover {
      	color:#000;
      	background-color:#ECE9D8;
      	border-left:1px solid #fff;
      	padding-top:18px;
      	padding-bottom:8px;
      }
      #metaltop-gold ul li.active a,
      #metaltop-gold ul li.active a:hover {
      	color:#fff;
      	background:#000;
      	border-left:1px solid #000;
      	padding-top:18px;
      	padding-bottom:8px;
      }


      Wayfinder adds `last` automatically unless overridden by code.

      Hope this works for you

      See also http://modxcms.com/forums/index.php/topic,44863.0.html
      http://modxcms.com/forums/index.php/topic,41062.0.html
        DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31