$navInPadding: 0.5rem
$ulBorder: 2px ridge darkgreen
$ulRadios: 0.5rem

/* ******************

nav
  ul
    list-style-type: none
    margin: 0 auto
    padding: 0
    background-color: hsla(0, 0%, 100%, 0.8)
    border-bottom: $ulBorder
    border-left: $ulBorder
    border-right: $ulBorder
    border-radius: 0 0 $ulRadios $ulRadios
    display: inline-block
    transition: all 60ms
    box-shadow: inset -2px -2px 10px lightblue, inset 2px 2px 10px lightblue
    height: 1.5rem

  li
    float: left
    width: auto
    margin: 0px 0px
    
    &:first-child
      padding-left: $navInPadding

    a
      display: block
      color: darkred
      text-align: center
      padding: 0.3rem $navInPadding $navInPadding 0
      text-decoration: none
      font-weight: bold
      font-size: 0.8rem 
      
      &:active, &:hover, &:focus, &.active
        color: red
        text-decoration: underline
        transform: scale(1.1)

  ul li ul li
    display: inline-block

  > ul > li > ul > li
    margin: middle

.submenu
  visibility: hidden
  position: relative
  margin-top: -5px
  margin-left: -10px
  background-color: rgb(255, 255, 255)

  li, a
    display: block
    float: none
    border-bottom: 1px solid goldenrod
    margin: 0 0 0 0

.submenuActive
  visibility: visible