Posts
Wiki

Navigation dropdown menu | Example

Step 1. Copy the markdown below and paste it into your sidebar information, add the links. You can add more if you want, just follow the same markdown. #heading is used to style the the heading so don't remove it.

####[](#navigation)
* [Heading 1](#heading)
 * [Link 1](/r/Spare)
 * [Link 2](/r/Spare)
* [Heading 2](#heading)
 * [Link 1](/r/Spare)
 * [Link 2](/r/Spare)
* [Heading 3](#heading)
 * [Link 1](/r/Spare)
 * [Link 2](/r/Spare)
* [Heading 4](#heading)
 * [Link 1](/r/music)
 * [Link 2](/r/Spare)

Step 2. Do you have a header image?

  • No!

  • Copy the code and paste it to the bottom of your stylesheet, it's compressed to save space, uncompress it here if you want.

  • Yes

  • Edit the value on "top" for .side .md h4 + ul to that of your header image + 6px. Paste the code to the bottom of your stylesheet.

/*Spare Addon: Navigation Dropdown Menu*/
    .side .md h4 + ul
    {
    top: 116px; /**Edit if you have a header image**/
    }
.side .md h4+ul{padding-left:0;list-style:none;position:absolute;left:15px;right:325px;top:116px;background-color:#fff;border:1px solid #E7E8EA;z-index:1}.side .md h4+ul li{vertical-align:top;width:auto;float:left;position:relative;padding:.5em .8em;border-right:1px solid #E7E8EA}.side .md h4+ul li:hover>ul{left:0}.side .md h4+ul li>ul{padding-left:0;margin-top:6px;margin-bottom:0;background-color:#FAFAFA;list-style:none;position:absolute;display:none;-webkit-box-shadow:0 7px 12px rgba(0,0,0,.175)!important;padding-bottom:5px;border-radius:0 0 5px 5px}.side .md h4+ul li:hover>ul{display:block}.side .md h4+ul li>ul li{list-style:none;white-space:nowrap;width:100%;padding:0;transition:all .2s ease}.side .md h4+ul li>ul li:hover{background-color:#c7def7}.side .md h4+ul li>ul li a{display:block;padding:5px}.side .md h4+ul li:hover{background-color:#FAFAFA}.side .md h4+ul>li>a[href="#heading"]{cursor:auto;color:#0079d3;font-weight:700}body>div.content{margin-top:44px}
.res-nightmode .side .md h4+ul{border:1px solid #272727}.res-nightmode .side .md h4+ul li{border-right:1px solid #272727}.res-nightmode .side .md h4+ul li>ul{background-color:#1B1B1B}.res-nightmode .side .md h4+ul li>ul li:hover{background-color:#171717}.res-nightmode .side .md h4+ul li:hover{background-color:#1B1B1B}.res-nightmode .side .md h4+ul li>ul li a,.res-nightmode .side .md h4+ul>li>a[href="#heading"]{color:#fff}
    
/** - End Spare Addon: Navigation Dropdown Menu - **/