I am redesigning the left side navigation for my website. I use html and css. I created a test file and it worked. But then I uploaded the modified css file and the test file to my website. And it did not work. I’d like to know what’s going on, but more importantly, I need to know (or figure out) how to get things to work when actually uploaded to the site. If it’s not going to work, shouldn’t that be the case everywhere?

Thanks.

Here’s the css code (including both old and new code since for now I want both to work)

    /* Left sidebar floating with variable width 10% width for now with 0 margins and 2 em    padding */
    #leftnav
    {position: relative;
    clear: left;
    float: left;
    width: 10%;
    margin: 0;
    padding: .5em;
    margin-right: 15px; margin-top: 40px;
    }
    /* Remove space above content in left navigation */
    #leftnav h3 { margin: 0 0 .5em 0; }

    /* thin rule between link groups */
    #leftnav hr {height: 1px;  border: 0px solid #24080E;}

    /* code to strip bullets from ul code - Moved up 27 May 2024 */
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    /* end ul bullet strip code. See silverdragon-css-notes for details and html test code */

    /* Leftside navigation using dropdown menus. Code adapted from www.w3schools.com: Dropdown  menu code */
    .dropbtn {
      background-color: #ffffff;
      color: #28040e;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

     .dropdown-content a {
       font-family: "Arial Narrow";
       color: #28040e;
       line-height: 1.0;
       font-weight: 400;
       padding: 12px 16px;
       text-decoration: none;
       display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
       display: block;
     }

     .dropdown:hover .dropbtn {
       background-color: #ffffff;
     }
     /*end drop menu code */

And here’s the html code – which I know is grammatically incorrect in some places, but works better that way – I’m pretty sure my s and <.div>s are unbalanced:

     <div id="leftnav">
    <h2>SHOP</h2>
    <ul><li>
    <div class="dropdown">
       <button class="dropbtn">Paintings: Tikkun Olam</button>
       <div class="dropdown-content">
       <a href="https://www.vener-art.com/Fine-Art-Latest-Series.html">Works for Peace</a>
       <a href="https://www.vener-art.com/Fine-Art-Latest-Series.html">Mismanaged Earth</a>
       <a href="https://www.vener-art.com/Fine-Art-Latest-Series.html">Offering Respite</a>
       </div>
     <!--</div> --></li>
     <li>
    <div class="dropdown">
    <button class="dropbtn">Works of Art on Paper</button>
    <div class="dropdown-content">
       <a href="#">Pen and Ink and Watercolor, larger works</a>
       <a href="#">Digital Downloadable Coloring Pages</a>
      </div>
     <!--</div> --></li>
     <li>
    <div class="dropdown">
    <button class="dropbtn">Bead Work</button>
    <div class="dropdown-content">
      <a href="#">Feminine Power Pendants</a>
      <a href="#">Neckpieces and Necklaces</a>
      <a href="#"> Sprial Weave Necklaces</a>
       </div>
    <!--</div> --></li></ul>
    </div>
    

I tried finagling the code in all sorts of ways including trying to get open and closing s and