sub navs with buttons, is it possible?

[EdgyRabbid]

So right now, i am trying to make a sub nav. i felt like my website had too many sub navs be their own pages, and i wanted them to be more uniform, in a sense.

https://edgyrabbid.space/NormalHomePage.html

heres my home page. Yes it is messy right now, it is currently being renovated.

anyways, i was wondering if this https://www.w3schools.com/HOWTO/howto_css_subnav.asp would work with buttons?

[pepper]

That should work with buttons, I think you'd just have to put a button <img> element inside the <a> element instead of the text. I did something similar for my mobile header, I have a "hamburger" style button that when clicked opens the navbar buttons, which i have do a sound when clicked. (My code is a mess and def not optimized but here it is in case you're curious)

HTML:

Code

<header>
                <div id="header_box">
                    <img id="headerimg" alt="a header image with a grey background, with text saying 'Mildly Pepper'. A sketch of a cat is on the right side, and there is a grimy texture over the image." src="https://mildlypepper.net/media/site/headerImage.png">
                    <label for="burger" onmousedown="javascript:playSound('key-select')" class="nav_label"><img style="height: 32px; width: 32px; border: none; box-shadow: none; filter: none;" src="https://mildlypepper.net/media/site/burger.png"></label>
                </div>
                <!-- ----------mobile header------------- -->
                <input type="checkbox" id="burger" class="nav_checkbox">
                <div class="nav_content">
                    <!-- misc website info lives here-->
                    <div id="utilities-mobile">
                        <div class="box" style="display: flex; flex-wrap: wrap; max-width: 12em;">
                            <img src="https://mildlypepper.net/media/gif_collection/paws.gif" style="padding: 0.125em; width: 4.125em;height: 1.5em;">
                            <a href="https://www.mabsland.com/Adoption.html"><img src="https://mildlypepper.net/media/buttons/Censor_Mc.gif"title="site intended for viewers 18+" style="padding: 0.125em; width: 4.125em;height: 1.5em;"></a>
                            <a href="https://www.sublimetext.com/"><img src="https://mildlypepper.net/media/gif_collection/sublime.png" style="padding: 0.125em; width: 4.125em;height: 1.5em;"></a>
                            <img src="https://mildlypepper.net/media/gif_collection/button_queer_coded.png" style="padding: 0.125em; width: 4.125em;height: 1.5em;">
                            <img src="https://mildlypepper.net/media/gif_collection/gnu-linux.gif" style="padding: 0.125em; width: 4.125em;height: 1.5em;">
                            <a href="https://moonpr1sm.com/random/30plusclub"><img src="https://mildlypepper.net/media/buttons/30plusclub.gif" style="padding: 0.125em; width: 4.125em;height: 1.5em;"></a>
                            <a href="https://mildlypepper.net/blog/posts/2026-02-27-The-Things-Worth-Doing.html">site manifesto</a>
                        <div class="box" style="background: none; border: none; max-width: 11em; display: flex; flex-wrap: wrap;">
                            <img src="https://mildlypepper.net/media/gif_collection/kirbygif.gif" style="padding: 0.125em; max-width: 2em;">
                            <a href="https://www.grrrl.valentinely.cc/"><img src="https://mildlypepper.net/media/gif_collection/madebya2-4.png" style="padding: 0.125em; max-width: 2.75em;"></a>
                        </div>
                        <pre>‾`~._.~´‾`~._.⛤ </pre>
                        <span style="font-size: smaller;">you are viewing the mobile version of the site! you'll have basic funtionality but please come back again on a PC, as that is the canon version :3</span>
                        </div>
                    </div>

                    <!-- script to play audio on keypress -->
                    <!-- i sampled the keypresses myself from a keyboard from the 80s lol -->
                    <script>
                        function playSound(ins){
                            document.getElementById(ins).play();
                        };
                    </script>
                    <audio id="key-select"  src="https://mildlypepper.net/media/site/keySelect.ogg" preload="auto"></audio>
                    <audio id="key-press"  src="https://mildlypepper.net/media/site/keyPressed.ogg" preload="auto"></audio>
                    <nav id="navbar-mobile">
                        <ul>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/">
                              <img style="max-width:8em;"  src="https://mildlypepper.net/media/site/home.png" ></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/art/">
                              <img src="https://mildlypepper.net/media/site/digitalArt.png"style="max-width:8em;"></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/photography/">
                              <img src="https://mildlypepper.net/media/site/photography.png"style="max-width:8em;"></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/about/">
                              <img src="https://mildlypepper.net/media/site/aboutMe.png"style="max-width:8em;"></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/blog/">
                              <img src="https://mildlypepper.net/media/site/blogbutton.png"style="max-width:8em;"></a></li>
                            
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.atabook.org/">
                              <img src="https://mildlypepper.net/media/site/guestbookButton.png"style="max-width:8em;"></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/collections/">
                              <img src="https://mildlypepper.net/media/site/collectionsButton.png"style="max-width:8em;"></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/external/">
                                <img src="https://mildlypepper.net/media/site/linksButton.png"style="max-width:8em;"></a></li>
                            <li><a onmousedown="javascript:playSound('key-press')" href="https://mildlypepper.net/sitemap/">
                              <img src="https://mildlypepper.net/media/site/sitemapButton.png"style="max-width:8em;"></a></li>
                        </ul>
                    </nav>
                </div>
...

CSS:

Code

.nav_checkbox:checked+.nav_content {
    display: flex;
    position: absolute;
    /*width: 100%;*/
    max-width: 48em;
    flex-direction: row;
    justify-content: safe center;
    color: #3d010d;
    /*background-color: #272727;*/
    z-index: 999;
    background-image: url('https://mildlypepper.net/media/site/mobilenavbg.png');
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
}

#utilities-mobile{
    display: flex;
    flex: 2;
    flex-direction: column;
    flex-wrap: wrap;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    max-width: 13em;
}

#header_box{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

header {
    max-width: 51em;
    margin: 0 auto;
    padding-top: 0.25em;
    padding-left: 0.5em;
}

#headerimg {
    width: 100%;
}
#navbar-mobile {
  display: flex;
    padding-top: 0.5em;
    background-position: center;
    background-size: 100% 5em;
    background-repeat: no-repeat;
}
#navbar-mobile ul {
    display: flex;
    flex:1;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: flex-start;
}
#navbar-mobile li a {
    padding-top: 0.625em;
    padding-bottom: 0.625em;
}
#navbar-mobile li {
    /*padding-right: 0.625em;*/
}
...