I want to have a parent menu title and when users scroll over it links are listed to the child menu pages. I have read other tutorials and nothing seems to work properly. Can you help? Please!!!
Hello emilyvb, and thanks for your question.
It sounds like you're looking for some Drupal drop down menus. By default Drupal doesn't have drop down menus, and that page explains the 3 popular Drupal menu modules that allow for a drop down navigation.
Mega MenuNice MenusSuperfish
I'd recommend giving Nice Menus a look first, because it's pretty easy to setup. Here is a quick guide for that:
Click on Modules, then click on +Install new module
In the Install from a URL field, you'd enter the URL to Nice Menus: http://ftp.drupal.org/files/projects/nice_menus-7.x-2.5.tar.gz, then click Install
Click on the Modules menu again, then scroll to the very bottom of the page and you should see a Other section with Nice Menus listed below it. Go ahead and place a check mark beside this in the Enabled column, then click on Save Configuration at the very bottom of the page.
Now navigate to Structure in the menu, and then click on Blocks
Scroll to the very bottom of the page, and under the Disabled section you should see two instances of Nice menu 1/2 (Nice menu).
Click on Configure to the far-right of Nice menu 1 (Nice menu)
For Menu Parent select <Main menu>, and for Menu Style select down. Then scroll down to the REGION SETTINGS section, and from the drop-down for your theme, select Header, scroll to the bottom and click on Save Block
Now navigate to the Structure menu, and then click Menus.
To the far right of Main menu, you can click on list links, and then you might see something like your page for Home and Page 1 on the same level as each other.
If you click on the arrowed cross beside Page 1 , you can drag it to the right to move it under the Home page. You create the hierarchy of your drop down menu this way, and once you are done click on Save configuration.
At this point, depending on your Drupal theme, you might notice that you've now got 2 main menus. To get rid of the default one that comes with your theme, navigate to the Appearance menu, then click on Settings beside your theme. Scroll down to the TOGGLE DISPLAY section, then un-check Main menu
Your menu will be rather small, and could probably use some styling at this point dependant on your theme. When I tried this out I used the default Bartik theme and was able to modify these CSS rules to achieve a nice looking menu:
/themes/bartik/css/layout.css
- Login to Drupal admin
- Click on Modules, then click on +Install new module
- In the Install from a URL field, you'd enter the URL to Nice Menus: http://ftp.drupal.org/files/projects/nice_menus-7.x-2.5.tar.gz, then click Install
- Click on the Modules menu again, then scroll to the very bottom of the page and you should see a Other section with Nice Menus listed below it. Go ahead and place a check mark beside this in the Enabled column, then click on Save Configuration at the very bottom of the page.
- Now navigate to Structure in the menu, and then click on Blocks
- Scroll to the very bottom of the page, and under the Disabled section you should see two instances of Nice menu 1/2 (Nice menu).
- Click on Configure to the far-right of Nice menu 1 (Nice menu)
- For Menu Parent select <Main menu>, and for Menu Style select down. Then scroll down to the REGION SETTINGS section, and from the drop-down for your theme, select Header, scroll to the bottom and click on Save Block
- Now navigate to the Structure menu, and then click Menus.
- To the far right of Main menu, you can click on list links, and then you might see something like your page for Home and Page 1 on the same level as each other.
If you click on the arrowed cross beside Page 1 , you can drag it to the right to move it under the Home page. You create the hierarchy of your drop down menu this way, and once you are done click on Save configuration.
- At this point, depending on your Drupal theme, you might notice that you've now got 2 main menus. To get rid of the default one that comes with your theme, navigate to the Appearance menu, then click on Settings beside your theme. Scroll down to the TOGGLE DISPLAY section, then un-check Main menu
- Your menu will be rather small, and could probably use some styling at this point dependant on your theme. When I tried this out I used the default Bartik theme and was able to modify these CSS rules to achieve a nice looking menu:
/themes/bartik/css/layout.css
I hope that helps answer your question, please let us know if you had any other questions at all! - Jacob.region-header { float: right; /* LTR */ margin: 0 5px 10px; }.region-header { clear: both; margin: 0px 0px -15px 0px; font-size: 1.9em; }