Multi-level navigation and easy menu definition

[mvlcek]

I'm lost. Your plug-in is just what I'm looking for, for the top menu drop-down ability, but for some reason I just cannot get it to work.

First I want to state that the plugin's functionality is to create the HTML code for the navigation menu, i.e. nested lists. How these nested lists are displayed (e.g. as drop-down menu) is not part of the plugin but is done using CSS. Nevertheless, here a step-for-step guide:

• Download the I18N plugin from http://get-simple.info/extend/plugin/i18n/69/
  
• Unpack it into your get-simple plugins folder
  
• Start the get-simple administration (there should be a new item I18N under "pages")
  
• Create or edit some pages' "page options" and give at least some pages a parent, which itself has no parent - these are the pages which will display in the drop-down part of the menu
  
• Go to "Theme" - "Edit Theme" - your default template is displayed
  
• Enter the following code in your template somewhere in the top part of your body:
  

Code:

<div class="sitemenu"><ul><?php get_i18n_navigation(return_page_slug(), 0, 1, true); ?></ul></div>

• View a page of your web site - you should see the menu as a list with sub lists for each drop down menu
  
• To get it displayed as drop-down lists, you have to add some css styles in "Theme" - "Edit Theme" - select your theme's CSS file - "Edit". The following styles are those of my demo site http://mvlcek.bplaced.net/multi-level-na...down-left/ (you should definitely improve them - don't change the lines marked with !!!):
  

Code:

.sitemenu {
  position: relative; /* !!! */
  height: 1.4em; /* make sure whole menu texts are shown */
  background-color: #ECECEC;
}
.sitemenu ul {
  position: absolute; /* !!! */
  list-style: none; /* no bullet points */
}
.sitemenu li {
  float: left; /* !!! */
  padding: 2px 10px;
  width: 8em; /* to make all items the same width */
}
.sitemenu li.current > a, .sitemenu li.currentpath > a {
  font-weight: 800; /* make current page's items bold */
}
.sitemenu li > a {
  color: #666;
  text-decoration: none;
  border-bottom: none;
}
.sitemenu li:hover > a {
  color: #92BF92;
}
.sitemenu li ul {
  display: none; /* !!! sub  lists are not shown initially */
}
.sitemenu li:hover ul {
  display: block; /* !!! but displayed when the mouse is over the menu item */
}
.sitemenu li ul li {
  float: none; /* !!! make sure drop down menu items are below each other */
}
.sitemenu li:hover ul li {
  background-color: #ECECEC;
  border: none 0;
}

• View a page of your web site again - you might have to press F5 (Refresh) or even clear your browser's cache - then you should see a working drop down menu (at least in Firefox, not sure about IE).
  

I hope this helps.