Just a short reminder to myself, copy / paste from here:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. 

Title (and content) of the article I stole from this web site.

From that same web site copy / paste of the key sentence:

HTML layout traditionally was not designed to specify vertical behavior

To have properly working vertical alignment, in my case, I had to introduce a table, this is my HTML:

<div style="height: 800px" class="detail-control">

	<table style="height:100%">
		<tbody>
			<tr>
				<td>
					<img style="vertical-align: middle" border="0" alt="Please press the play button." onerror="this.src='path to image to be displayed if original one is not found'" src="/URL of an image">
				</td>
			</tr>
		</tbody>
	</table>

</div>

Notice height of div (800px for the sake of testing), and height of table (100% to cover whole div), then in img tag note style.

This time I was combining id's and classes. This is my HTML:

<div id="article" class="l-fixed">
	Article
</div>

CSS:

#article {
    width: 80%;
    float: left;
    border: 2px solid black;
}

.l-fixed#article {
    width: 600px;
}

Notice that there is no space in selectors: 

.l-fixed#article

Like this we can add class on the same element with id, otherwise, with space:

#article {
    width: 80%;
    float: left;
    border: 2px solid black;
}

.l-fixed #article {
    width: 600px;
}

I would need nested element, something like:

<div class="l-fixed">

	<div id="article">
		Article
	</div>

</div>

Example I took from here, but from the css and html I deleted parts which are needed for beautification.

HTML should be simple:

    <ul>
        <li>
            Menu 1
            <ul>
                <li>
                    Menu 1 SubMenu 1
                </li>
                <li>
                    Menu 1 SubMenu 2
                </li>
                <li>
                    Menu 1 SubMenu 3
                </li>
            </ul>
        </li>
        <li>
            Menu 2
            <ul>
                <li>
                    Menu 2 SubMenu 1
                </li>
                <li>
                    Menu 2 SubMenu 2
                </li>
            </ul>
        </li>
        <li>Menu 3</li>
    </ul>

CSS:

ul {
    list-style: none; //I dont need bullets
    padding: 0px; //so that submenus are under main menu correctly aligned
}

ul li {
    position: relative;
    float: left;
}

li ul {
    display: none; //sub menus will not be displayed
}

li:hover ul {
    display: block; //display submenus when mouse is over
    position: absolute;
}

Real life example

  • Menu 1
    • Menu 1 SubMenu 1
    • Menu 1 SubMenu 2
    • Menu 1 SubMenu 3
  • Menu 2
    • Menu 2 SubMenu 1
    • Menu 2 SubMenu 2
  • Menu 3

Subcategories