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/