Customising the dropdown menu styling

Template Customization

In the following tutorial we will detail a number of CSS snippets which will allow you to edit the styling of some of the elements of the top menu dropdown menus. Each of these snippets can be edited to your own taste and added using the 'Custom CSS' field of your templates parameters. To access the 'Custom CSS' field, from your Joomla administration navigate to Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS.

Note that for some of our newer template releases we haved added styling options for the top menu dropdown menu directly within the templates parameters. To access these options navigate to Extensions -> Templates -> [YourTemplateStyle] -> Menus. Where available these styling options would be easier than using the following snippets, so be sure to check the above first before adding these snippets.

Dropdown Background Color

The following will allow you to set the background color of your dropdown menu where #EEEEEE is your new background color(edit to taste).

.hornav ul ul {
    background-color: #EEEEEE;
}

Dropdown Menu Item Color

The following will allow you to set the menu item color of your dropdown menu where #555555 is your new menu item color(edit to taste).

.hornav ul ul li a {
    color: #555555;
}

Dropdown Menu Item Hover Color

The following will allow you to set the menu item hover color of your dropdown where #000000 is your new menu item text color and #DDDDDD is your new menu item background color (edit to taste).

.hornav ul ul li:hover a {
    background-color: #DDDDDD
    color: #000000;
}

Font Awesome Icon Color

A number of our templates allow you to prepend each menu item with a Font Awesome of your choice. The following will allow you to set color of these icons where #777777 is your new icon color (edit to taste).

.hornav .menu li li [class^="fa-"]::before, 
.hornav .menu li li [class*=" fa-"]::before {
    color: #777777;
}

Adding a Border Radius to your Dropdown Menu

The following will allow you to add/edit a border radius to your dropdown menu giving your dropdown rounded corners where 8px is your new border radius (edit to taste).

.hornav ul ul {
    border-radius: 8px;
}

You can also add a border width and color by using the following (edit to taste).

.hornav ul ul {
    border: 3px solid #777777;
    border-radius: 8px;
}

Highlighting the Current Item in your Dropdown Menu

And lastly you can use the following if you wish to style the current menu item in your dropdown where #000000 is your current menu item text color and #DDDDDD is your current menu item background color (edit to taste).

.hornav ul ul li.current > a {
    background-color: #DDDDDD
    color: #000000;
}