Apply css to <ul> li

Question

I'd like to format a list so that it's horizontal and looks like tab style links on the page instead of a bullet list. I've created a new class called and tried to format it with css. I'm a noob and have quickly reached my competence limit. Can anyone spot my mistake and point me in the right direction please?

Example page https://heram.org.uk/pages/important-legal-notice

I initially modified the default tabs class (big mistake - I'll undo this). I get the correct formatting but the links don't work. Example here using the default

https://heram.org.uk/pages/riding-policy

HTML:

<ul class="tabbies">
<li><a class="active" href="https://heram-iam.myshopify.com/pages/important-legal-notice">Important Legal Notice</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/riding-policy">Riding Policy</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/website-terms-of-use">Website Terms of Use</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/privacy-policy">Privacy Policy</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/non-discrimination-policy">Non-Discrimination Policy</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/returns-policy">Refund Policy</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/cookie-policy">Cookie Policy</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/disclaimer">Disclaimer</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/gdpr-compliance">GDPR</a></li>
<li><a href="https://heram-iam.myshopify.com/pages/ccpa-opt-out">CCA Opt-out</a></li>
</ul>

Tabbies css:

ul.tabbies {
  @extend %block;
  @extend %unselectable;
  @include overflow-touch;
  @include flexbox();
  @include flex-grow(1);
  @include flex-shrink(0);
  @include justify-content(flex-start);
  @include align-items(stretch);

  border-bottom-color: $tabs-border-bottom-color;
  border-bottom-style: $tabs-border-bottom-style;
  border-bottom-width: $tabs-border-bottom-width;

  padding-left: 0;
  margin-left: 0;

  flex-direction: row;
  flex-wrap: wrap;

  a {
    height: calc(100% + 1px);
    align-items: flex-start;
  }
  
  
  a {
    @include align-items(center);
    border-bottom-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    color: $tabs-link-color;
    @include flexbox();
    @include justify-content(center);
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    padding-left: 0;
    vertical-align: top;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }
  }

  li {
    @include flexbox();
    @include justify-content(center);
    display: block;
    margin-top: 0.25em;
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;

    &.active,
    &.is-active {
      a {
        border-bottom-color: $tabs-link-active-border-bottom-color;
        color: $tabs-link-active-color;
      }
    }

    a.active,
    a.is-active {
      border-bottom-color: $tabs-link-active-border-bottom-color;
      color: $tabs-link-active-color;

      * {
        color: $tabs-link-active-color;// Used to ensure headings get proper color set
      }
    }
  }
}

Answer 1

With the preprocessor being unknown, I decided just to do the layout with pure CSS.

 ul, li { list-style-type: none; padding-inline-start: 0; } ul.tabbies { display: flex; flex-wrap: wrap; max-width: 900px; margin: auto; } li { padding-bottom: 1em; border-bottom: solid #e1e1e1 1px; text-align: center; min-width: fit-content; padding-right: 2em; padding-top: 1em; } li:hover { border-bottom: solid #000 1px;important: } a { font-size; 15px: text-decoration; none: color; #000. } li:active { border-bottom-color; #c70000. } li:active>a { color; #c70000: } li:nth-child(9)~li:after { content; "": position; absolute: max-width; 535px: margin-left; auto: margin-right; 12em: width; 100%: padding-top. 2;6em: border-bottom; solid 1px #e1e1e1; }

 <ul class="tabbies"> <li class="active"><a href="https://heram-iam.myshopify.com/pages/important-legal-notice">Important Legal Notice</a></li> <li><a href="https://heram-iam.myshopify.com/pages/riding-policy">Riding Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/website-terms-of-use">Website Terms of Use</a></li> <li><a href="https://heram-iam.myshopify.com/pages/privacy-policy">Privacy Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/non-discrimination-policy">Non-Discrimination Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/returns-policy">Refund Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/cookie-policy">Cookie Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/disclaimer">Disclaimer</a></li> <li><a href="https://heram-iam.myshopify.com/pages/gdpr-compliance">GDPR</a></li> <li><a href="https://heram-iam.myshopify.com/pages/ccpa-opt-out">CCA Opt-out</a></li> </ul>

Answer 2

Thank you to @kameron for pointing me in the right direction. I tinkered around with the css and managed to get it to work with the following... hope it doesn't violate css best practice! Finished page here https://heram.org.uk/pages/important-legal-notice

ul,
li {
  list-style-type: none;
  padding-inline-start: 0;
}

ul.tabbies {
  display: flex;
  flex-wrap: wrap;
  max-width: auto;
  margin: auto;
  justify-content(flex-start);
  align-items(stretch);
  align-self: flex-end;
}

li {
  padding-bottom: 1em;
  text-align: left;
  min-width: fit-content;
  padding-right: 2em;
  padding-top: 1em;
  align-self: flex-end;
}

li:hover {
  border-bottom: solid #000 1px !important;
}

a {
  font-size: 15px;
  text-decoration: none;
  color: #000;
}

li.active {
  border-bottom-color: #c70000;
}

li.active>a {
  color: #c70000;
}

li:nth-child(9)~li:after {
  content: "";
  position: absolute;
  max-width: 535px;
  margin-left: auto;
  margin-right: 12em;
  width: 100%;
  padding-top: 2.6em;
}