killthecake | [50] Dropdown Navigation

Code:

<a href="URL" style="color: #eee; text-decoration: none; display: block; border-radius: 20px; background: rgba(0,0,0,0.8); padding: 10px 0; margin-bottom: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center;">
    Link
  </a>

<details style="background: rgba(0,0,0,0.8); border-radius: 20px; padding: 10px; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin-bottom: 10px;">
    <summary style="cursor: pointer;">
      Dropdown
    </summary>

<div style="background: center/cover url('IMAGE_URL'); width: 40%; border-radius: 10px; display: block; margin: 10px;"></div>

<div style="width: 55%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

</div>
    </div>
  </details>

<details style="background: rgba(0,0,0,0.8); border-radius: 20px; padding: 10px; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin-bottom: 10px;">
    <summary style="cursor: pointer;">
      Dropdown
    </summary>

<div style="width: 55%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

</div>
    </div>
  </details>

<div style="width: 55%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

</div>
    </div>
  </details>

<a href="https://killthecake.dreamwidth.org/" style="text-decoration: none; display: block; border-radius: 20px; color: #999; padding: 10px 0; margin-bottom: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center; font-size: 8px;">
    Code
  </a>
</div>

❖ This is another code released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content.

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ You can turn each dropdown into just links or links and an image. The images should also be rather large, not just a 100x100 icon. That's because the image will grow the more links you add in your dropdown.

❖ If you want one of the dropdowns to be open when someone first sees the entry, search in the code for the dropdown you want and type open right after the first details. For example: details open style="etc etc..."

❖ Default code includes three dropdowns with five links each that are bookended by two main links. In other words, what you see in the example above is the default (sans the images). Add or remove as much as you want.

Ctrl+F & Replace:
❖ URL - link urls
❖ Link - Placeholder text for links
❖ Dropdown - Dropdown header
❖ IMAGE_URL - url for your images

#eee text color
#999 credit link

rgba(0,0,0,0.8) transparent dark background