CSS Elements

The second round of modifications to the menu_style.css style sheet in this example involves making each list of navigation links into drop-down menus. First a display: none; declaration is supplied to the ul.menu selector to hide all the menus. The display: none; declaration prevents the browser from rendering the menu <ul> elements. Then, the :hover pseudo-class is applied to make those menus reappear if the user’s mouse cursor hovers over a navigational heading:

div#nav > div > ul > li:hover > ul.menu,
ul.menu:hover {
display: block;
}

The first selector in this example works using the same direct child relationship that you’ve observed before. Essentially what you are stating here is the following: If the nav <div> element has a child <div> element, and that child <div> element has a <ul> child element, and that child <ul> element has a <li> element that the user’s mouse is hovering over, and that <li> element has a <ul> element with a menu class name, display it as a block element. This creates the effect of dynamic drop-down menus using CSS. The second selector is applied merely as a logical precaution. If the user’s mouse is hovering over a <ul> element with a menu class name, for example any submenu, you continue to display that element as a block element.

You modify the menu_system.css style sheet in two key areas. The first modification involved controlling the layering of the JT’s logo, so that the JT’s logo is always on top. To do this, you apply a z-index: 1; declaration to the rule for the JT’s logo. This demonstrates that an integer provided to the z-index property, which specifies layering by providing a number, takes precedence over the auto z-index. This means that the auto z-index is determined first, and then elements with a numbered z-index appear above those with an auto z-index. In this scenario, this eliminates the need to explicitly specify a z-index for any of the other elements.

The first <div> in the sequence of four is given a light yellow background and some basic dimensions and properties that also apply to the other <div> elements. Then, by using the adjacent sibling selector, I select the subsequent <div> elements and provide those with different backgrounds and a decrementing z-index value. This results in the <div> with a light yellow background being displayed on top, followed by the <div> with the light blue background, followed by the <div> with the light green background, and finally the <div> with a pink background is shown at the back of the stack. This example demonstrates that the highest z-index value appears highest on the z-axis, or if you envision an invisible line perpendicular to the computer screen, the highest z-index appears furthest toward the user on that invisible line. If I omit the z-index property from the example shown in the previous post, the value of the z-index property becomes auto, and the stack along the z-axis is determined by the document flow.

For instance, the first element with positioning applied appears on the bottom of the stack, and each subsequent element appears one higher. The last element in the document with positioning receives the highest z-index value. Omitting the z-index value is demonstrated in the next post.