How to add sub-menu (css) under actual sub-menu in WordPress

Question

How can I add sub-menu under actual sub-menu in WordPress?

On one of my website, I want the coral coloured menu (which contains The Sciences, Accreditation etc) to have sub menus when you hover over it. I can't create a sub menu of this as the coral coloured menu is actually a sub menu within wordpress. The top menu being the "why, how, what, who" menu at the top.

*If you check, DISC should be as sub-menu (dropdown) under The Sciences but not working as it should be.

Any help would be highly appreciated.

Many thanks,

~ Dipak G.

user3777827 user3777827 · Accepted Answer · 2014-07-12T06:42:24

You can simple drag and drop the sub-menus under the sub-menu. Sub-menus can be pages, custom-link and anything from left side of menu page. And then css of a accordingly.

the series would be:

The science
    sub-menu(of science)
         sub-menu  a
         sub-menu  b
         sub-menu  b
Accreditation 
    sub-menu(of Accreditation )
         sub-menu  c
         sub-menu  e
         sub-menu  f
and so on

and if you want css then tell me.

add this css in your theme and css accordingly:

    .sub-menu-corel .sub-menu {
display: none;
position: absolute;
top: 100%;
width: 180px;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0;
z-index:999;
}

.sub-menu-corel .sub-menu  li{
width:100%;
}

.sub-menu-corel .sub-menu  li a{
display:block;
width:100%;
color:#111;
}

.sub-menu-corel .sub-menu  li a:hover{
color:#111;
}

this is updated css

How to add sub-menu (css) under actual sub-menu in WordPress

2 Answers