3

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/

3 Answers 3

6

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.

1
  • Ah, lovely that did the job :) Apr 13, 2012 at 9:32
1

Change width from auto to 100%.

#breadcrumbs ul #parent li ul {
width: 100%;} /* Change this width to 100% */
0
#breadcrumbs ul #parent li ul {
margin-left: 0;
padding-left: 0;
top: 42px;
width: auto;}

#breadcrumbs ul#parent li {
float: left;
height: 39px;
line-height: 39px;
min-width: 1px;
position: relative;}
3
  • You removed position absolute and the left positioning from the child ul. I know I can do it without those but they are necessary. Apr 13, 2012 at 9:29
  • why dont you place the children with out <ul> I mean..<ul><li>parent</li><li>children</li></ul>. Or may be parent in a div and position children under them in ul li
    – John
    Apr 13, 2012 at 9:39
  • Anyways I see you found a solution. Good luck
    – John
    Apr 13, 2012 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.