Defining dropdown menu characteristics

[davecoventry]

I have a horizontal menu: "HOME" "DISCOVER" "STRATEGY MODEL" "PROFILE" "CONTACT US"

The "DISCOVER" has a drop-down submen (in green for clarity).

The HTML:

              <ul id="menutop">
                <li class="root">
                  <a class="bullet" href="http://www.clivestacey.co.za/">
                  <span> HOME </span>
                  </a>
                </li>
                <li class="root">
                    <a href="#" class="daddy"> DISCOVER </a>
                    <ul class="menusub">
                      <li>
                        <a class="sub_menu" href="/index.php?option=com_content&view=article&id=60&Itemid=59">
                          <span> Insight </span>
                        </a>
                      </li>
                      <li>
                        <a class="sub_menu" href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=60">
                          <span> Innovate </span>
                        </a>
                      </li>
                      <li>
                        <a class="sub_menu" href="/index.php?option=com_content&amp;view=article&amp;id=48&amp;Itemid=61">
                          <span> Implement </span>
                        </a>
                      </li>
                    </ul>
                </li>

                <li class="root">
                  <a class="bullet" href="/index.php?option=com_content&view=article&id=66&Itemid=64">
                    <span> STRATEGY MODEL </span>
                  </a>
                </li>

                <li class="root">
                  <a class="bullet" href="/index.php?option=com_content&view=category&layout=blog&id=41&Itemid=66">
                    <span> PROFILE </span>
                  </a>
                </li>

                <li class="root">
                  <a class="bullet" href="/index.php?option=com_content&view=article&id=51&Itemid=57">
                    <span> CONTACT US </span>
                  </a>
                </li>

              </ul>

The CSS is defined thus (Taken from the Firefox CSS Inspector, overwritten directives marked [del]...[/del]):

element {}
a.sub_menu span {
    margin: 20px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, caption {
    border: 0px none;
    outline: 0px none;
    padding: 0px;
    font-size: 100%;
    background: none repeat scroll 0% 0% transparent;
}
* {
    [del]margin: 0px;[/del]
    [del]padding: 0px;[/del]
}
a.sub_menu {
    color: #008000;
}
ul#menutop li, ul#menutop ul.menusub li {
    list-style-type: none;
}
#menutop li {
    list-style: none outside none;
}
ul {
    [del]list-style-image: none;[/del]
}
#menutop {
    line-height: 1em;
    [del]font-size: 12px;[/del]
}
#rt-header, #rt-header .title, #rt-top, #rt-top .title, #rt-navigation {
    [del]color: #555;[/del]
}
body.font-size-is-large {
    [del]font-size: 14px;[/del]
    [del]line-height: 1.7em;[/del]
}
body {
    font-family: Helvetica,Arial,sans-serif;
}
body {
    text-rendering: optimizespeed;
}
body, #rt-bottom, legend, a:hover, .button:hover, .module-content ul.menu a, .module-content ul.menu .separator, .module-content ul.menu .item, .roktabs-wrapper .roktabs-links li span, #rokajaxsearch .inputbox, #form-login .inputbox {
    [del]color: #555;[/del]
}

In particular, I'm looking at the CSS definition for a.sub_menu span {margin: 20px}. I'm expecting the submenu items "Insight", "Innovate" and "Implement" to have a 20 pixel margin around them but they are almost on top of one another. Furthermore, they are offset to the right of their parent menu item ("DISCOVER"). Why is this happening?

[anthonydaly]

To align their left edges with the parent menu item, first remove the style a.sub_menu span {margin: 20px;}

Then to style the submenu items (in this example, creating a 20px space before each submenu item), add this style: ul.menusub li { margin-top: 20px; }

Hope this helps!

[mattster]

line-height: 26px; will solve your problem, but you need to look at the overall structure of the menu as it's not best practice.

[davecoventry]

Thanks for the assistance.

However, removing the a.sub_menu span {margin: 20px;} section and adding ul.menusub li { margin-top: 20px; } produces this:

[davecoventry]

Mattster, what IS best practice?

I agree, I need to look at it again, but I don't know how to structure the menu.

[mattster]

Here is an example of a 3 layer menu with some styles added to it, so maybe try adapting it?

It's only your HTML and CSS arn't quite there. Hope this helps :)

[drjohn]

There is no need to have the span in the li. It serves no purpose. The style for the link in the li will do whatever you need.

You also don't need your menusub and sub-menu styles either. You can apply styles via the combinations of ul li a and ul li ul li a. It's a mistake to add extra classes when the combination of ul, li and a can b identified uniquely by giving the ul a class or id . No need to give the ul one class, the li another and the a another class too.

[davecoventry]

I'm going round in circles.

CSS:

  .menutop {
    margin: 20px 0;
    padding: 15px 5px;
    position: relative;
    line-height: 1em;
    font-size: 12px;
    display: inline-block;
  }
  ul.menutop li{
    display: inline;
  }
  ul.menutop li a{
    text-decoration: none;
    color: #555;
    padding: 12px;
  }
  ul.menutop li a:hover {
    border-bottom: 4px solid;
    color: #009fe3;
  }
  ul.menutop li.daddy a:hover {
    color: red;
  }

Firebug screenshot:

This is the HTML. I'm expecting to see the secondary <ul> under the "DISCOVER" anchor tag and within the <li class="daddy"></li>tags but in the firebug screenshot it's missing:

              <ul class="menutop">
                <li>
                  <a href="http://www.clivestacey.co.za/"> HOME </a>
                </li>
                <li class="daddy">
                  <a href="#"> DISCOVER </a>
                  <ul>
                    <li>
                      <a href="/index.php?option=com_content&view=article&id=60&Itemid=59">
                        Insight
                      </a>
                    </li>
                    <li>
                      <a href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=60">
                        Innovate 
                      </a>
                    </li>
                    <li>
                      <a href="/index.php?option=com_content&amp;view=article&amp;id=48&amp;Itemid=61">
                        Implement 
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>

Where do I unhide the "Insight"-"Innovate"-"Implement" submenu?

[mattster]

I took your original screenshot and had a play, and here is what I managed: jsFiddle.

It's hardly perfect and there are so many cool things you can do to expand on it (check this out), but it does what you hopefully originally wanted.

[davecoventry]

Alright.

It's a bit clearer. Thanks Mattster!

I have a rotating slideshow thingy which takes the "menutop" class as it's javascript argument.

<script type="text/javascript">
window.addEvent('load', function() {
            new Fusion('ul.menutop', {
              pill: 1,
              effect: 'slide and fade',
              opacity: 1,
              hideDelay: 500,
              centered: 0,
              tweakInitial: {'x': 0, 'y': 0},
                  tweakSubsequent: {'x': 2, 'y': -12},
              menuFx: {duration: 200, transition: Fx.Transitions.Sine.easeOut},
              pillFx: {duration: 400, transition: Fx.Transitions.Back.easeOut}
            });
                });
</script>

For some reason this disables the drop down menu.

[davecoventry]

Thanks.

I've removed the offending Javascript, and all seems to be working as expected.