"Your time is limited, so don't waste it living someone else's life"

How to create a tree main menu in grails

Build the GSP page contain the menu with one div tag named mainMenu

    <div id="spsLogo" role="banner">
        <a href="http://tranhoangminh.vn"><asset:image src="sps_logo.png" alt="Code Snippet" /></a>
        <div class="mainMenu">
                <li><a href="${createLink(uri: '/')}" style="text-decoration: none;"> Home</a></li>
                <li><a href="#">Resource </a>
                        <li><a href="${createLink(action:'index', controller:'customer')}" style="text-decoration: none">Customer</a></li>
                        <li><a href="${createLink(action:'index', controller:'project')}" style="text-decoration: none">Project</a></li>
                        <li><a href="${createLink(action:'index', controller:'document')}" style="text-decoration: none">Document</a></li>
                        <li><a href="${createLink(action:'index', controller:'contact')}" style="text-decoration: none">Contact</a></li>
                <li><a href="${createLink(action:'index', controller:'Search')}">Search</a></li>
                <li><a href="#">Manager</a>
                        <li><a href="${createLink(action:'viewUser', controller:'User')}" style="text-decoration: none">Add User </a></li>
                        <li><a href="${createLink(action:'viewRole', controller:'User')}" style="text-decoration: none">Manager Role </a></li>
    <g:layoutBody />

    <div class="footer" role="contentinfo">
        <small>&copy; Copyright 2014 CRM | Powered by &nbsp;<a>SPS VietNam</a></small>
    <div id="spinner" class="spinner" style="display: none;">
        <g:message code="spinner.alt" default="Loading&hellip;" />

Secondly, layout it with css file named main.css

    position: absolute;
.mainMenu ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1;

.mainMenu ul li {
    display: block;
    position: relative;
    float: left;

.mainMenu li ul {
    display: none;

.mainMenu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;

.mainMenu ul li a:hover {
    background: #3b3b3b;

.mainMenu li:hover ul {
    display: block;
    position: absolute;

.mainMenu li:hover li {
    float: none;
    font-size: 13px;

.mainMenu li:hover a {
    background: #3b3b3b;

.mainMenu li:hover li a:hover {
    background: #1e7c9a;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: