Custom menu CSS style in a markdown cell
<style>
#menu {
position: fixed;
right: 0;
top: 50%;
width: 15em;
margin: -2.5em 0 0 0;
z-index: 5;
background: hsla(80, 90%, 40%, 0.7);
color: white;
font: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 100%;
text-align: left;
border: solid hsla(80, 90%, 40%, 0.5);
border-right: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
border-radius: 3em 0.5em 0.5em 3em;
}
#menu li { margin: 0 }
#menu a { color: inherit }
/* Make menu absolute, not fixed, on IE 5 & 6 */
#menu { position: absolute }
*>#menu { position: fixed }
ol.nested
{
counter-reset: item
}
li.nested
{
display: block
}
li.nested:before
{
content: counters(item, ".") ". ";
counter-increment: item
}
</style>
<ol class="nested" id="menu">
<li class="nested"><a href="#item_1">item 1</a></li>
<li class="nested"><a href="#item_2">item 2</a>
<ol class="nested">
<li class="nested"><a href="#subitem_1">subitem 1</a></li>
<li class="nested"><a href="#subitem_2">subitem 2</a></li>
</ol></li>
<li class="nested"><a href="#item_3">item 3</a>
</ol>
Custom menu CSS style in a markdown cell