Creating a horizontal drop-down menu using CSS styles |
|||||
Creating a horizontal drop-down menu using CSS styles |
|
||
This topic shows an example of how the CMSListMenu control can render a horizontal drop‑down menu. If you wish to create this example for yourself, please follow the tutorial in the Getting started topic, then continue with the following steps:
1. Set the HoverCSSClassName property value to: Horizontal
The code of the CMSListMenu control should look like this:
<cms:CMSListMenu ID="CMSListMenu1" runat="server" HoverCSSClassName="Horizontal" /> |
2. Add the following style definitions inside the <head> element:
<style type="text/css" media="screen">
/* Horizontal menu class definitions*/ .Horizontal { BORDER-RIGHT: #c2c2c2 1px solid; BORDER-TOP: #c2c2c2 1px solid; FONT-SIZE: 12px; FLOAT: left; BORDER-LEFT: #c2c2c2 1px solid; WIDTH: 100%; BORDER-BOTTOM: #c2c2c2 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #e2e2e2 } .Horizontal UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } .Horizontal LI { BORDER-RIGHT: #e2e2e2 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #e2e2e2 1px solid; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #e2e2e2 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #e2e2e2 1px solid } .Horizontal A { PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 112px; COLOR: black; PADDING-TOP: 2px; BACKGROUND-COLOR: #e2e2e2; TEXT-DECORATION: none } .Horizontal A:hover { BACKGROUND: #808080 no-repeat right bottom; COLOR: white } .Horizontal UL UL { Z-INDEX: 500; WIDTH: 120px; BORDER-BOTTOM: #c2c2c2 2px solid; POSITION: absolute } .Horizontal UL UL LI { CLEAR: left; DISPLAY: block; POSITION: relative } .Horizontal UL UL UL { BORDER-RIGHT: #c2c2c2 2px solid; LEFT: 100%; BORDER-BOTTOM: white 0px solid; TOP: -1px } .Horizontal UL UL { DISPLAY: none } .Horizontal UL LI:hover UL UL { DISPLAY: none } .Horizontal UL UL LI:hover UL UL { DISPLAY: none } .Horizontal UL LI:hover UL { DISPLAY: block } .Horizontal UL UL LI:hover UL { DISPLAY: block } .Horizontal UL UL UL LI:hover UL { DISPLAY: block }
</style> |
This modifies the CSS style of the menu so that it displays a horizontal drop‑down menu.
The classes are defined in the <head> element only for this quick example, if you wish to use the control on a Kentico CMS website, it is recommended to define these classes in the stylesheet used by the website or specific page via the administration interface in Site Manager -> Development -> CSS stylesheets.
3. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a menu like this: