Question

So I have an unordered list like so:

<nav id="breadcrumbs">
        <a href="#" id="home"></a>
        <ul id="parent">
            <li><a href="#">Health, Safety and Security</a>
                <ul class="child">
                    <li><a href="#">Getting started</a></li>
                    <li><a href="#">Communication</a></li>
                    <li><a href="#">Personal and people development</a></li>
                    <li><a href="#">Quality</a></li>
                    <li><a href="#">Equality, diversity and rights</a></li>
                    <li><a href="#">Clinical skills</a></li>
                    <li><a href="#">Additional materials</a></li>
                </ul>
            </li>
            <li><a href="#">Infection control</a>
                <ul class="child">
                    <li><a href="#">Record keeping</a></li>
                    <li><a href="#">Confidentiality and consent</a></li>
                    <li><a href="#">Protecting vulnerable people</a></li>
                    <li><a href="#">Workplace safety and security</a></li>
                </ul>
            </li>
            <li><a href="#">Hand hygiene</a></li>
        </ul>
    </nav>

<ul class="child"> may need to be wider than it’s parent <li>. However the parent <li> must have position: relative; as <ul class="child"> has position: absolute and takes a left value to be positioned against it’s parent.

Here is the relevant CSS:

#breadcrumbs ul#parent {
    height: 39px;
    width: 905px;
    float: right;
    position: relative;
    background: #f38630;
}

#breadcrumbs ul#parent li {
    position: relative;
    height: 39px;
    float: left;
    min-width: 1px; /* required to fix Opera bug */
    padding: 0 47px 0 15px;
    line-height: 39px;
}

#breadcrumbs ul#parent li a {
    display: block;
    height: 42px;
}

#breadcrumbs ul li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

#breadcrumbs ul li a:visited {
    color: #ffffff;
}

#breadcrumbs ul#parent li ul {
    position: absolute;
    width: auto;
    left: -5px;
    top: 42px;
}

#breadcrumbs ul#parent li ul li {
    float: none;
    height: 25px;
    margin: 0 3px 3px 3px;
    padding: 0 15px;
    line-height: 25px;
}

I realise I can give <ul class="child"> a set width greater than it’s parent, but I want it to be as wide as largest child and not fixed in size.

Does anyone know how this is possible?

A live example of the code in use can be found here: http://rcnhca.org.uk/sandbox/

Answer 1

The absolute DIV will refer to the parents width..

I think the solution is by working on the <li> elements.
If you want the text to be rendered correctly, try to add

white-space: nowrap;

on #breadcrumbs ul#parent li ul li

It will prevent the text to be rendered wrongly.