Title: [Plugin: Multi-Level Navigation] Dropline possible?
Last modified: August 19, 2016

---

# [Plugin: Multi-Level Navigation] Dropline possible?

 *  [canchuckwood](https://wordpress.org/support/users/canchuckwood/)
 * (@canchuckwood)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/plugin-multi-level-navigation-dropline-possible/)
 * Hi folks
 * I’m using the multi-level navigation plugin for the main menu on my mum’s site.
   I’m trying to make it dropline instead of dropdown, and I can only get so far.
 * Here’s the link [livinglegacies.sunstonemedia.co.nz](http://livinglegacies.sunstonemedia.co.nz/)
   although I’m working on it so it may not display the right thing at the right
   moment.
 * Basically I have 4 parent pages with a number of children. When you hover over
   the parent link, a dropline does appear, but it appears underneath the link as
   it would if it were dropdown, rather than to the far left. This means that the
   first page works fine, but on the subsequent links, the dropline is going off
   the edge. It’s also not being restricted by the containing div, it is pushing
   the edge of the page out, bringing up a scrollbar at the bottom.
 * Hope I’m clear enough about the issue!
 * What I want is a nice, centred, restricted dropline like [this](http://www.cssplay.co.uk/menus/pro_dropline.html).
   I can’t just use Stu’s code, as the markup output for the plugin is different.
   I could of course just have a static menu, but if my mum wanted to add or remove
   pages, she couldn’t dynamically.
 * Any thoughts?
    Thanks Charlette
 * PS. Here is the altered code for styling the plugin:
 *     ```
       #suckerfishnav {background:#ffffff;font-size:1.2em;font-family:trebuchet ms, verdana,sans-serif;font-weight:bold; width:100%; float:right;margin:0 auto;}
       #suckerfishnav, #suckerfishnav ul {list-style:none;line-height:40px;padding:0;width:100%;text-align:left; margin: 0 auto;}
       #suckerfishnav a {display:block;color:#9933cc;text-decoration:none;padding:0px 10px;}
       #suckerfishnav li {float:left; padding:0;}
   
       #suckerfishnav ul {position:absolute; left:0;list-style:none;padding:0;width:100%;text-align:center; margin: 0 auto; border-top:2px solid #9933cc;}
   
       #suckerfishnav li li {display:block;height:auto; float:left; padding:0 10px; text-align:center; width:auto;}
   
       #suckerfishnav li li a {padding:4px 10px;	font-size:0.8em;color:#9933cc;}
   
       #suckerfishnav li ul ul {height:auto;width:auto;font-weight:normal;margin:0;line-height:1;}
       #suckerfishnav li li:hover {background:#fff;}
       #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#9933cc;}
       #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#007cc3;}
       #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#007cc3;}
       #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
       #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#fff;}
       #suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#fff;}
       ```
   

The topic ‘[Plugin: Multi-Level Navigation] Dropline possible?’ is closed to new
replies.

## Tags

 * [multi-level navigation](https://wordpress.org/support/topic-tag/multi-level-navigation/)

 * 0 replies
 * 1 participant
 * Last reply from: [canchuckwood](https://wordpress.org/support/users/canchuckwood/)
 * Last activity: [16 years, 10 months ago](https://wordpress.org/support/topic/plugin-multi-level-navigation-dropline-possible/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics