Kentico CMS 7.0 Controls

Creating a horizontal drop-down menu using CSS styles

Creating a horizontal drop-down menu using CSS styles

 Previous topic Next topic Mail us feedback on this topic!  

Creating a horizontal drop-down menu using CSS styles

 Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

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:

 

controls_clip0016