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

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.