List item text incorrectly overflowing sub list

Question

I have created a site-map using the following HTML:

<ul class="main-menu">
    <li>
        <div>
            <a href="#">Menu Item 1</a>
            <ul class="actions">
                <li>
                    <a
                      title="Collapse"
                      href="#"
                      class="icon icon-bullet-toggle-minus"
                    >Collapse</a>
                </li>
                <li>
                    <a
                      title="Add to Favourites"
                      href="#"
                      class="icon icon-award-star-add"
                    >Add to Favourites</a>
                </li>
            </ul>
        </div>
        <ul class="child-nodes">
            <li>
                <div>
                    <a href="#">Menu Item 1's First Child</a>
                    <ul class="actions">
                        <li>
                            <a
                              title="Open"
                              href="#"
                              class="icon icon-page"
                            >Open</a>
                        </li>
                        <li>
                            <a
                              title="Add to Favourites"
                              href="#"
                              class="icon icon-award-star-add"
                            >Add to Favourites</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div>
                    <a href="#">A menu item with a really long name that is
                    eventually going to wrap over and break my styling</a>
                    <ul class="actions">
                        <li>
                            <a
                              title="Open"
                              href="#"
                              class="icon icon-page"
                            >Open</a>
                        </li>
                        <li>
                            <a
                              title="Add to Favourites"
                              href="#"
                              class="icon icon-award-star-add"
                            >Add to Favourites</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
    <li>
        <div>
            <a href="#">Menu Item 2</a>
            <ul class="actions">
                <li>
                    <a
                      title="Expand"
                      href="#"
                      class="icon icon-bullet-toggle-plus"
                    >Expand</a>
                </li>
                <li>
                    <a
                      title="Add to Favourites"
                      href="#"
                      class="icon icon-award-star-add"
                    >Add to Favourites</a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div>
            <a href="#">Menu Item 3</a>
            <ul class="actions">
                <li>
                    <a title="Open" href="#" class="icon icon-page">Open</a>
                </li>
                <li>
                    <a
                      title="Add to Favourites"
                      href="#"
                      class="icon icon-award-star-add"
                    >Add to Favourites</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

and the following CSS:

.main-menu {
    list-style: none;
    padding: 0;
    width: 405px;
}

.main-menu div {
    padding: 5px;
}

.main-menu div a {
    color: #036;
    padding: 5px;
    padding-left: 0;
    text-decoration: none;
}

.main-menu .actions {
    float: left;
    margin: 0;
    margin-right: 3px;
    padding: 0;
}

.main-menu .actions li {
    display: inline;
    list-style: none;
}

.main-menu .actions a {
    outline: none;
    padding: 0;
    text-indent: -9999px;
}

.main-menu .child-nodes {
    list-style: none;
    padding-left: 41px;
}

.main-menu .space {
    margin-top: 16px;
}

The issue is that as soon as the text of a menu item becomes wider than the 405 pixel width of the menu, the item no longer wraps correctly.

Instead of the text flowing underneath the "actions" list, the text flows over the "actions" list.

I want to have something similar to:

• [some icon] [another icon] item text
  that wraps around

But instead I get:

• item text that wraps
  [some icon] [another icon] around

If you would like to see the problem in action, here's an example of the issue.

Any ideas?

Answer 1

If I understand correctly what you want to achieve, then you must simply remove float: left; from .main-menu .actions:

.main-menu .actions {
    margin: 0;
    margin-right: 3px;
    padding: 0;
}

Is this the desired result?

Answer 2

The first thing I notice is that the <a> tag comes before the <ul class="actions"> tag. Have you tried reversing the order of the tags?

I currently can't try it out, but if you want the icons to appear before the text, I'd order the tags the same way. Not sure if this will solve the issue, though.

Edited to add: I just run a quick test. Changing

<A href="http://robertwhittaker.com/example/#"&gt;A menu item with a really long name that is
eventually going to wrap over and break my styling</A>
<UL class="actions">
  <LI>
    <A title="Open" href="http://robertwhittaker.com/example/#" class="icon icon-page">Open</A>
  </LI>
  <LI>
    <A title="Add to Favourites" href="http://robertwhittaker.com/example/#" class="icon icon-award-star-add">Add to Favourites</A>
  </LI>
</UL>

to...

<UL class="actions">
  <LI>
    <A title="Open" href="http://robertwhittaker.com/example/#" class="icon icon-page">Open</A>
  </LI>
  <LI>
    <A title="Add to Favourites" href="http://robertwhittaker.com/example/#" class="icon icon-award-star-add">Add to Favourites</A>
  </LI>
</UL>
<A href="http://robertwhittaker.com/example/#"&gt;A menu item with a really long name that is
eventually going to wrap over and break my styling</A>

seemed to solve your problem (if I understood it correctly).

Answer 3

With help from RegDwight and Anne Schuessler, I think I have now solved this issue.

The first step was to swap link and the "actions" list around so that it now appears as:

<div>
    <ul class="actions">
        <li>
            <a class="icon icon-page" href="#" title="Open">Open</a>
        </li>
        <li>
            <a
              class="icon icon-award-star-add"
              href="#"
              title="Add to Favourites"
            >Add to Favourites</a>
        </li>
    </ul>
    <a href="#">Menu Item</a>
</div>

From there it was just a case of slightly adjusting the CSS so that the link text was always inline instead of wrapping underneath the "actions" menu.

The complete CSS is as follows:

.main-menu {
    list-style-type: none;
    padding: 0;
    width: 405px;
}

.main-menu div {
    padding: 5px 5px 5px 46px;
}

.main-menu div a {
    color: #036;
    text-decoration: none;
}

.main-menu .actions {
    float: left;
    margin: 0 3px 0 -41px;
    padding: 0;
}

.main-menu .actions li {
    display: inline;
    list-style-type: none;
}

.main-menu .actions a {
    outline-style: none;
    text-indent: -9999px;
}

.main-menu .child-nodes {
    list-style-type: none;
    padding-left: 41px;
}

.main-menu .space {
    margin-top: 16px;
}

It was just a case of padding the container div by the width of the "actions" list and then giving the "actions" list a negative left-margin of the same value.