Superfish jQuery menu (how to)

Question

I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).

My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.

Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.

See below current code:

.banner {
    color: #000000;
    font-size: 2em;
    font-family: "Public Sans"; 
    font-weight: bolder;
    letter-spacing: -0.05em;
    padding-left: 0.2em;
    padding-right: 0.2em;
  }
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #d0d3d4;
  }

li {
    float: left;
  }
  
li a, .dropbtn {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
li a:hover, .dropdown:hover .dropbtn {
    background-color: #abacac;
  }
li.dropdown {
    display: inline-block;
  }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #d0d3d4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
    display: block;
  }

  <ul>
            <!--- nothing --->
            <li class="banner">nassau</li>
            <li><a href="#news">News</a></li>
            <li class="dropdown">
              <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </li>
        </ul>

Your help will be greatly appreciated.

Answer 1

For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.

Your code doesn't show any CSS showing position fixed anywhere.

.banner {
    color: #000000;
    font-size: 2em;
    font-family: "Public Sans"; 
    font-weight: bolder;
    letter-spacing: -0.05em;
    padding-left: 0.2em;
    padding-right: 0.2em;
  }
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #d0d3d4;
  }

li {
    float: left;
  }
  
li a, .dropbtn {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
li a:hover, .dropdown:hover .dropbtn {
    background-color: #abacac;
  }
li.dropdown {
    display: inline-block;
  }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #d0d3d4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
    display: block;
  }
  
  .fixed{
   position:fixed;
   width:100%;
  top:0;
  }

<div class="fixed">
<ul>
            <!--- nothing --->
            <li class="banner">nassau</li>
            <li><a href="#news">News</a></li>
            <li class="dropdown">
              <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </li>
        </ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>