HTML/CSS: Kind-element, breiter als relativ positionierten Eltern

So, ich habe eine ungeordnete Liste, etwa 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"> können, müssen breiter sein als die Eltern <li>. Aber die Eltern <li> muss position: relative; als <ul class="child"> hat position: absolute und nimmt eine left Wert positioniert werden, die gegen die Eltern.

Ist hier das relevante 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;
}

Ich begreife, dass ich geben kann <ul class="child"> einen Satz Breite, die größer als die Eltern werden, aber ich möchte es so breit ist wie die größte Kind und nicht eine Feste Größe.

Weiß jemand wie das möglich ist?

Einem live-Beispiel der code im Einsatz haben, können hier gefunden werden: http://rcnhca.org.uk/sandbox/

InformationsquelleAutor George Reith | 2012-04-13
Schreibe einen Kommentar