Subsection List

Created 04 Jan 2018 07:44, Updated 04 Jan 2018 07:44

The Subsections list on every note page to the right uses a very special coding in order to bring out the boxes upon hovering over the box. The code also causes the text not to run off the screen or out of the box. Overall, only one CSS class is needed to accomplish the goal, .subsection, but there is a lot of coding for the class.

The code is as follows:

    height: 1.4em;
    border: 1px solid #660;
    margin-right:-1px; margin-bottom:1px;
    padding: 0px 3px 0px 3px;
    width: 130px;
.subsection span{    display: none; }
.subsection:hover span{
    position: absolute;
    display: inline;
    margin: 15px -4px;
    height: auto;
    width: 250px;
    background: #FFF;
    border: 1px solid #660;
    color: #000;
    padding: 3px;
.subsection:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;

Of these, you really should not change .subsection span and .subsection:hover span span. The others you can change looks for.

.subsection by itself dictates the looks of the actual tabs. The .subsection:hover span controls the looks of the box that appears upon hovering over the tab.

Fix IE bug

Dacă nu este specificat altfel, conţinutul acestei pagini este licenţiat sub Creative Commons Attribution-ShareAlike 3.0 License