Skip to content

Instantly share code, notes, and snippets.

@iparr

iparr/mega_dropdown.css

Created November 26, 2010 09:52
Show Gist options
  • Save iparr/716480 to your computer and use it in GitHub Desktop.
Save iparr/716480 to your computer and use it in GitHub Desktop.
Download ZIP
WIP: Mega dropdown with in-dropdown rollovers called from the footer
Raw
mega_dropdown.css
ul#productNav {
font-size:1.0em;
/*font-weight:bold;*/
margin:0 auto;
padding:0;
width:960px;
}
ul#productNav li {
background:none;
display:inline;
position:relative;
margin:0 10px 0 0;
padding:0;
zoom:1;
}
ul#productNav li a {
color:#fff;
display:inline-block;
/* needs ie fix */
line-height:2.7em;
padding:0 12px; /*background:#3dd;*/
zoom:1;
}
ul#productNav li.here a {
background:#CFD8DC url(../images/bg/nav_here.png) top left no-repeat;
color:#11506C;
font-weight:bold;
}
/* =megadrop down stuff */
ul#productNav li.hovering/*.hasChildren*/ > a {
background:#fff url(../images/bg/productNav_active.jpg) bottom left repeat-x;
/* Can we only have the border on IE, and use the box-shadow for all other browsers? */
*border: 1px solid #999;
border-bottom:none;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#11506C;
margin:-4px;
padding:0 16px;
z-index:999;
box-shadow: 0 0 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0 0 2px rgba(0,0,0,0.75);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.75);
}
/* stupid ie6 */
ul#productNav li.hasChildren a {
background:none;
color:#fff;
border:none;
}
ul#productNav li.hasChildren ul li a {
color:#11506C;
}
/* reset a spacing */
ul#productNav li.hovering.hasChildren ul a {
margin:0;
padding-left:0;
padding-right:0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
ul#productNav li.hovering > span {
display:none;
}
/* ul#productNav li div ul {
display:inline;
margin:-1px 0 0 -4px;
*margin:0;
padding:4px 10px 10px 10px;
position:absolute;
*top:2.8em;
left:0;
z-index:888;
width:800px;
min-height:200px;
}*/
/* ul#productNav li div#garagedoors ul,
ul#productNav li div#windows ul,
ul#productNav li div#stairs ul,
ul#productNav li div#patiodoors ul {
width:440px;
}*/
ul#productNav li.hovering div {
display:block;
}
ul#productNav li ul li {
float:left;
padding:8px;
position:relative;
width:180px;
*width:176px; /* ie6 */
}
ul#productNav li ul li a {
background:none !important;
border:none !important;
border-radius:0;
color:#11506C;
line-height:1.2em;
padding:0;
}
ul#productNav li ul li h2 a {
color:#333;
}
ul#productNav li ul li ul {
background:none;
border:none;
padding:0;
position:relative;
top:0;
width:auto;
zoom:1; /* ie6 */
}
ul#productNav li ul li ul li {
display:list-item;
list-style:none inside url(../images/bullet_01.gif);
padding:0.3em 0;
*list-style:none none none;
*background:url(../images/bullet_01.gif) left 0.5em no-repeat;
*padding-left: 10px;
}
ul#productNav li ul li ul li.active {
font-weight:bold;
}
ul#productNav li > span {
background:url(../images/bg/nav_arrow.gif) top left no-repeat;
position:absolute;
top:5px;
*top:10px;
right:0;
width:6px;
height:4px;
zoom:1;
}
/* megadropdowns */
#dropDownStorage {
position:absolute;
top:0;
left:0;
z-index:999;
/* background:#eee;*/
}
#dropDownStorage > div {
background:#fff url(../images/bg/productNav_submenu.jpg) top left repeat-x;
/* Can we only have the border on IE, and use the box-shadow for all other browsers? */
*border: 1px solid #999;
border-top:none;
border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
display:none;
overflow:hidden;
padding:0;
position:absolute;
top:12.3em;
left:0;
/* min-height:300px;*/
width:414px;
}
#dropDownStorage > div.hovering {
display:block;
}
#dropDownStorage ul {
padding-left:0;
margin-left:0;
}
#dropDownStorage ul li {
padding-left:0;
margin:0;
}
#dropDownStorage ul li ul {
width:auto !important;
margin-bottom:0;
}
#dropDownStorage ul li ul li {
margin:0 !important;
padding:0;
}
#dropDownStorage ul li ul li a {
background:url(../images/bullet_01.gif) left 0.8em no-repeat;
display:block;
padding:3px 0 3px 10px;
}
#dropDownStorage ul li ul li a.current {
font-weight:bold;
}
#dropDownStorage ul li ul li a:hover {
background-color:#E4EAED;
}
/* unique details for each dropdown */
div#internaldoors {
left:400px;
width:612px;
}
div#internaldoors ul {
width:396px;
}
div#internaldoors ul li:nth-child(2n+3) {
clear:left;
}
div#externaldoors {
width:612px;
}
div#externaldoors ul li:nth-child(2n+3) {
clear:left;
}
div#patiodoors {
/* width:612px;*/
}
/* div#patiodoors ul li:nth-child(2n+3) {
clear:left;
}*/
div#patiodoors ul > li {
clear:left;
}
/*div#windows { }
#windows h2,
#windows p {
padding-left:0;
}
div#patiodoors { }
#patiodoors h2,
#patiodoors p {
padding-left:0;
}*/
/* */
#dropDownStorage div ul {
float:left;
}
#dropDownStorage div ul li {
list-style:none;
float:left;
width:180px;
margin-left:18px;
}
#dropDownStorage div ul li h2 {
margin-bottom:0;
}
#dropDownStorage div.dropDownDetails {
border:0;
float:right;
position:relative;
height:auto;
min-height:auto !important;
padding:5px 18px 0 0;
width:180px;
z-index:9999;
}
#dropDownStorage div.dropDownDetails div {
border:0;
}
div.dropDownDetails div img {
float:left;
padding:10px 10px 10px 0;
}
div.dropDownDetails div h2,
div.dropDownDetails div p {
border:none;
clear:none;
/* padding-left:80px;*/
}
div.dropDownDetails div h2 span {
color:#11506C;
display:block;
font-family:Times, serif;
margin-bottom:-0.4em;
text-transform:uppercase;
}
Raw
mega_dropdown.html
<ul id="productNav">
<li class="internaldoors"><a href="internaldoors" title="">Internal Doors</a></li>
<li class="externaldoors"><a href="externaldoors" title="">External Doors</a></li>
<li class="patiodoors"><a href="patiodoors" title="">Patio Doors</a></li>
<li class="garagedoors"><a href="garagedoors" title="">Garage Doors</a></li>
<li class="windows"><a href="windows" title="">Windows</a></li>
<li class="stairs"><a href="stairs" title="">Stairs</a></li>
<li class="door-frames"><a href="door-frames" title="">Door Frames</a></li>
</ul>
<div id="dropDownStorage">
<div id="internaldoors" class="dropDown">
<ul><li >
<h2><a href="/internaldoors/moulded" title="Moulded" >Moulded</a></h2>
<ul><li class="13">
<a href="/internaldoors/moulded/panel" title="Panel" class="">Panel</a>
<div class="13">
<img src="assets/images/dropdowns/internal/moulded.jpg" alt="" />
<h2>
<span>Moulded</span>
Panel
</h2>
<p>Moulded doors available in smooth or woodgrain finish in seven designs</p>
</div>
</li>
<li class="14">
<a href="/internaldoors/moulded/pre-finished-royal-oak" title="Pre-finished Royal Oak" class="">Pre-finished Royal Oak</a>
<div class="14">
<img src="assets/images/dropdowns/internal/royaloak.jpg" alt="" />
<h2>
<span>Moulded</span>
Pre-finished Royal Oak
</h2>
<p>Fully finished oak effect moulded doors</p>
</div>
</li>
<li class="15">
<a href="/internaldoors/moulded/two-light-half-glazed" title="Two Light &amp; Half Glazed" class="">Two Light &amp; Half Glazed</a>
<div class="15">
<img src="assets/images/dropdowns/internal/twolight.jpg" alt="" />
<h2>
<span>Moulded</span>
Two Light &amp; Half Glazed
</h2>
<p>Half glazed doors available in various designs</p>
</div>
</li>
<li class="16">
<a href="/internaldoors/moulded/full-glazed" title="Full Glazed" class="">Full Glazed</a>
<div class="16">
<img src="assets/images/dropdowns/internal/fullglazed.jpg" alt="" />
<h2>
<span>Moulded</span>
Full Glazed
</h2>
<p>Full glazed doors design to maximise natural light into the home</p>
</div>
</li>
<li class="18">
<a href="/internaldoors/moulded/wardrobe-doors" title="Wardrobe Doors" class="">Wardrobe Doors</a>
<div class="18">
<img src="images/products/thumbnails/camden-wardrobe-400.jpg" alt="" />
<h2>
<span>Moulded</span>
Wardrobe Doors
</h2>
<p>Woodgrain finish. Supplied primed or pre-finished in white silk paint</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/internaldoors/flush" title="Flush" >Flush</a></h2>
<ul><li class="117">
<a href="/internaldoors/flush/foil-veneer-effect-doors" title="Foil Veneer Effect Doors" class="">Foil Veneer Effect Doors</a>
<div class="117">
<img src="assets/images/dropdowns/internal/realwoodveneer.jpg" alt="" />
<h2>
<span>Flush</span>
Foil Veneer Effect Doors
</h2>
<p>Fully finished, high quality doors available in six finishes with glazed options</p>
</div>
</li>
<li class="118">
<a href="/internaldoors/flush/paint-grade-hardboard-and-mdf" title="Paint Grade, Hardboard &amp; MDF" class="">Paint Grade, Hardboard &amp; MDF</a>
<div class="118">
<img src="assets/images/dropdowns/internal/paintgrade.jpg" alt="" />
<h2>
<span>Flush</span>
Paint Grade, Hardboard &amp; MDF
</h2>
<p>Ideal for commercial applications in a wide range of sizes and finishes</p>
</div>
</li>
<li class="119">
<a href="/internaldoors/flush/real-wood-over-veneered-doors" title="Real Wood Over-Veneered Doors" class="">Real Wood Over-Veneered Doors</a>
<div class="119">
<img src="images/products/thumbnails/WHITE-OAK_tn.jpg" alt="" />
<h2>
<span>Flush</span>
Real Wood Over-Veneered Doors
</h2>
<p>High quality veneered doors in popular finishes including Ash, Maple and Beech</p>
</div>
</li>
<li class="120">
<a href="/internaldoors/flush/free-style-range" title="Free Style Range" class="">Free Style Range</a>
<div class="120">
<img src="assets/images/dropdowns/internal/freestyle.jpg" alt="" />
<h2>
<span>Flush</span>
Free Style Range
</h2>
<p>Clean contemporary MDF doors with unique routered designs</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/internaldoors/feature" title="Feature" >Feature</a></h2>
<ul><li class="121">
<a href="/internaldoors/feature/pre-finished-white" title="Pre-finished White" class="">Pre-finished White</a>
<div class="121">
<img src="assets/images/dropdowns/internal/whiteprimed.jpg" alt="" />
<h2>
<span>Feature</span>
Pre-finished White
</h2>
<p>Clean, minimal and contemporary panel doors with matching glazed styles.</p>
</div>
</li>
<li class="122">
<a href="/internaldoors/feature/pre-finished" title="Pre-finished" class="">Pre-finished</a>
<div class="122">
<img src="assets/images/dropdowns/internal/prefinished.jpg" alt="" />
<h2>
<span>Feature</span>
Pre-finished
</h2>
<p>Available in popular Maple, Oak and Cherry finishes, no further decoration required.</p>
</div>
</li>
<li class="124">
<a href="/internaldoors/feature/clear-pine" title="Clear Pine" class="">Clear Pine</a>
<div class="124">
<img src="assets/images/dropdowns/internal/clearpine2.jpg" alt="" />
<h2>
<span>Feature</span>
Clear Pine
</h2>
<p>Available in popular styles with both glazed versions and fire door options.</p>
</div>
</li>
<li class="125">
<a href="/internaldoors/feature/oak" title="Oak" class="">Oak</a>
<div class="125">
<img src="assets/images/dropdowns/internal/oak.jpg" alt="" />
<h2>
<span>Feature</span>
Oak
</h2>
<p>Choose from chic minimal shaker doors or a more traditional farmhouse style.</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/internaldoors/room-dividers" title="Room Dividers" >Room Dividers</a></h2>
<ul><li class="12">
<a href="/internaldoors/room-dividers/room-fold" title="Room Fold Plus" class="">Room Fold Plus</a>
<div class="12">
<img src="assets/images/dropdowns/internal/roomfold.jpg" alt="" />
<h2>
<span>Room Dividers</span>
Room Fold Plus
</h2>
<p>Our new Integral Room Divider System is ideal for open plan living on demand.</p>
</div>
</li>
<li class="17">
<a href="/internaldoors/room-dividers/moulded-glazed-pairs" title="Moulded Glazed Pairs" class="">Moulded Glazed Pairs</a>
<div class="17">
<img src="assets/images/dropdowns/internal/glazedpairs.jpg" alt="" />
<h2>
<span>Room Dividers</span>
Moulded Glazed Pairs
</h2>
<p>An ideal way to subdivide rooms with the option of opening up space</p>
</div>
</li>
<li class="126">
<a href="/internaldoors/room-dividers/pair-maker-system" title="Pair Maker System" class="">Pair Maker System</a>
<div class="126">
<img src="assets/images/dropdowns/internal/pairmaker.jpg" alt="" />
<h2>
<span>Room Dividers</span>
Pair Maker System
</h2>
<p>Choose standard doors and make your own pair of doors. Oak and Primed finish.</p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails0">
<span class="viewAllLink"><a href="internaldoors">View all Internal Doors</a></span>
</div>
</div>
<div id="externaldoors" class="dropDown">
<ul><li >
<h2><a href="/externaldoors/collections" title="Collections" >Collections</a></h2>
<ul><li class="128">
<a href="/externaldoors/collections/lancaster-doorsets" title="Lancaster Doorsets" class="">Lancaster Doorsets</a>
<div class="128">
<img src="assets/images/dropdowns/external/lancaster.jpg" alt="" />
<h2>
<span>Collections</span>
Lancaster Doorsets
</h2>
<p>Single Entrance Fully Factory Finished Doorset Collection</p>
</div>
</li>
<li class="129">
<a href="/externaldoors/collections/kensington" title="Kensington" class="">Kensington</a>
<div class="129">
<img src="assets/images/dropdowns/external/kensington.jpg" alt="" />
<h2>
<span>Collections</span>
Kensington
</h2>
<p>Popular Oak finish with new glazing designs to suit any home</p>
</div>
</li>
<li class="498">
<a href="/externaldoors/collections/dreamvu" title="DreamVu" class="">DreamVu</a>
<div class="498">
<img src="assets/images/dropdowns/patio/dreamvu.jpg" alt="" />
<h2>
<span>Collections</span>
DreamVu
</h2>
<p>High performance doorset available in all timber and aluminium clad timber</p>
</div>
</li>
<li class="363">
<a href="/externaldoors/collections/kensington-plus" title="Kensington Plus" class="">Kensington Plus</a>
<div class="363">
<img src="assets/images/rsz_serna_cutout01.jpg" alt="" />
<h2>
<span>Collections</span>
Kensington Plus
</h2>
<p>Part finished oak doors with triple leading glazing designs.</p>
</div>
</li>
<li class="499">
<a href="/externaldoors/collections/farndale" title="Farndale" class="">Farndale</a>
<div class="499">
<img src="assets/images/dropdowns/patio/farndale.jpg" alt="" />
<h2>
<span>Collections</span>
Farndale
</h2>
<p>A softwood or hardwood contemporary design french doorset</p>
</div>
</li>
<li class="131">
<a href="/externaldoors/collections/mackintosh-inspired-cherry" title="Mackintosh Inspired Cherry" class="">Mackintosh Inspired Cherry</a>
<div class="131">
<img src="assets/images/dropdowns/external/mackintosh.jpg" alt="" />
<h2>
<span>Collections</span>
Mackintosh Inspired Cherry
</h2>
<p>Glazed doors inspired by Charles Rennie Mackintosh</p>
</div>
</li>
<li class="132">
<a href="/externaldoors/collections/clifton-doorsets" title="Clifton Doorsets" class="">Clifton Doorsets</a>
<div class="132">
<img src="assets/images/dropdowns/external/clifton.jpg" alt="" />
<h2>
<span>Collections</span>
Clifton Doorsets
</h2>
<p>Knot-free clear timber, available in five door styles</p>
</div>
</li>
<li class="320">
<a href="/externaldoors/collections/mackintosh-inspired" title="Mackintosh Inspired Oak" class="">Mackintosh Inspired Oak</a>
<div class="320">
<img src="images/products/thumbnails/oak-abington.jpg" alt="" />
<h2>
<span>Collections</span>
Mackintosh Inspired Oak
</h2>
<p>This range has been inspired by the work of Charles Rennie Mackintosh</p>
</div>
</li>
<li class="130">
<a href="/externaldoors/collections/westbury" title="Westbury" class="">Westbury</a>
<div class="130">
<img src="assets/images/dropdowns/external/westbury.jpg" alt="" />
<h2>
<span>Collections</span>
Westbury
</h2>
<p>Our unglazed range is designed to give you maximum choice</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/externaldoors/timber" title="Timber" >Timber</a></h2>
<ul><li class="134">
<a href="/externaldoors/timber/hemlock-panel" title="Hemlock Glazed &amp; Unglazed" class="">Hemlock Glazed &amp; Unglazed</a>
<div class="134">
<img src="assets/images/dropdowns/external/hemlockpanel.jpg" alt="" />
<h2>
<span>Timber</span>
Hemlock Glazed &amp; Unglazed
</h2>
<p>Traditional feature doors supplier either factory glazed or unglazed</p>
</div>
</li>
<li class="135">
<a href="/externaldoors/timber/redwood-panel-unglazed" title="Redwood Unglazed" class="">Redwood Unglazed</a>
<div class="135">
<img src="assets/images/dropdowns/external/redwoodpanel.jpg" alt="" />
<h2>
<span>Timber</span>
Redwood Unglazed
</h2>
<p>Economy unglazed back door styles</p>
</div>
</li>
<li class="136">
<a href="/externaldoors/timber/boarded-doors-and-gates" title="Boarded Doors and Gates" class="">Boarded Doors and Gates</a>
<div class="136">
<img src="assets/images/dropdowns/external/gates.jpg" alt="" />
<h2>
<span>Timber</span>
Boarded Doors and Gates
</h2>
<p>A range of traditional, utility tongue-and-grooved doors and garden gates.</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/externaldoors/composite-steel" title="Composite &amp; Steel" >Composite &amp; Steel</a></h2>
<ul><li class="138">
<a href="/externaldoors/composite-steel/composite-doorsets" title="Secured by Design Composite Doorsets" class="">Secured by Design Composite Doorsets</a>
<div class="138">
<img src="assets/images/dropdowns/external/composite.jpg" alt="" />
<h2>
<span>Composite &amp; Steel</span>
Secured by Design Composite Doorsets
</h2>
<p>High performance composite doorsets in a number of styles and hardware options</p>
</div>
</li>
<li class="139">
<a href="/externaldoors/composite-steel/steel-security-doorset" title="Steel Security Doorset" class="">Steel Security Doorset</a>
<div class="139">
<img src="assets/images/dropdowns/external/security.jpg" alt="" />
<h2>
<span>Composite &amp; Steel</span>
Steel Security Doorset
</h2>
<p>Unique adjustable steel doorset. Available in two widths</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/externaldoors/paint-grade/paint-grade" title="Paint Grade" >Paint Grade</a></h2>
<ul><li class="140">
<a href="/externaldoors/paint-grade/paint-grade" title="Paint Grade" class="">Paint Grade</a>
<div class="140">
<img src="assets/images/dropdowns/external/paintgrade.jpg" alt="" />
<h2>
<span>Paint Grade</span>
Paint Grade
</h2>
<p>A range of external paint grade veneer flush and glazed doors.</p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails1">
<span class="viewAllLink"><a href="externaldoors">View all External Doors</a></span>
</div>
</div>
<div id="patiodoors" class="dropDown">
<ul><li >
<h2><a href="/patiodoors/folding-sliding-patio-doorsets" title="Folding Sliding Patio Doorsets" >Folding Sliding Patio Doorsets</a></h2>
<ul><li class="84">
<a href="/patiodoors/folding-sliding-patio-doorsets/oak-canberra-duo-folding-sliding-patio-doorset" title="Oak Canberra Duo - folding sliding patio doorset" class="">Oak Canberra Duo - folding sliding patio doorset</a>
<div class="84">
<img src="assets/images/dropdowns/patio/canberra.jpg" alt="" />
<h2>
<span>Folding Sliding Patio Doorsets</span>
Oak Canberra Duo - folding sliding patio doorset
</h2>
<p>Premium oak folding sliding patio doorset</p>
</div>
</li>
<li class="144">
<a href="/patiodoors/folding-sliding-patio-doorsets/wellington-folding-sliding-patio" title="Wellington - folding sliding patio" class="">Wellington - folding sliding patio</a>
<div class="144">
<img src="assets/images/dropdowns/patio/wellington.jpg" alt="" />
<h2>
<span>Folding Sliding Patio Doorsets</span>
Wellington - folding sliding patio
</h2>
<p>Softwood or hardwood fine quality stock folding sliding patio.</p>
</div>
</li>
<li class="467">
<a href="/patiodoors/folding-sliding-patio-doorsets/smoothfold" title="Smoothfold - folding sliding patio" class="">Smoothfold - folding sliding patio</a>
<div class="467">
<img src="assets/images/dropdowns/patio/smoothfold.jpg" alt="" />
<h2>
<span>Folding Sliding Patio Doorsets</span>
Smoothfold - folding sliding patio
</h2>
<p>Striking finished oak stock folding sliding patio doorset ideal for refurbishment projects</p>
</div>
</li>
<li class="415">
<a href="/patiodoors/folding-sliding-patio-doorsets/oak-fold" title="Oak Fold - folding sliding patio" class="">Oak Fold - folding sliding patio</a>
<div class="415">
<img src="assets/images/dropdowns/patio/smoothfold.jpg" alt="" />
<h2>
<span>Folding Sliding Patio Doorsets</span>
Oak Fold - folding sliding patio
</h2>
<p>Unfinished oak folding sliding patio doorset available from stock</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/patiodoors/sliding-patio-doorset/ledbury-hardwood-sliding-patio-doors" title="Sliding Patio Doorset" >Sliding Patio Doorset</a></h2>
<ul><li class="142">
<a href="/patiodoors/sliding-patio-doorset/ledbury-hardwood-sliding-patio-doors" title="Ledbury - A hardwood external sliding Timber Patio Doorset" class="">Ledbury - A hardwood external sliding Timber Patio Doorset</a>
<div class="142">
<img src="assets/images/dropdowns/patio/ledbury.jpg" alt="" />
<h2>
<span>Sliding Patio Doorset</span>
Ledbury - A hardwood external sliding Timber Patio Doorset
</h2>
<p>An externally sliding hardwood Patio door.</p>
</div>
</li>
</ul>
</li>
<li >
<h2><a href="/patiodoors/french-doorsets" title="French Doorsets" >French Doorsets</a></h2>
<ul><li class="417">
<a href="/patiodoors/french-doorsets/dreamvu" title="DreamVu" class="">DreamVu</a>
<div class="417">
<img src="assets/images/dropdowns/patio/dreamvu.jpg" alt="" />
<h2>
<span>French Doorsets</span>
DreamVu
</h2>
<p>High performance doorset available in all timber and aluminium clad timber</p>
</div>
</li>
<li class="143">
<a href="/patiodoors/french-doorsets/clifton-softwood-french-doors" title="Clifton - softwood french doors" class="">Clifton - softwood french doors</a>
<div class="143">
<img src="assets/images/dropdowns/patio/clifton.jpg" alt="" />
<h2>
<span>French Doorsets</span>
Clifton - softwood french doors
</h2>
<p>Softwood french doorset available in a variety of styles</p>
</div>
</li>
<li class="416">
<a href="/patiodoors/french-doorsets/farndale" title="Farndale" class="">Farndale</a>
<div class="416">
<img src="assets/images/dropdowns/patio/farndale.jpg" alt="" />
<h2>
<span>French Doorsets</span>
Farndale
</h2>
<p>A softwood or hardwood contemporary design french doorset</p>
</div>
</li>
<li class="141">
<a href="/patiodoors/french-doorsets/flockton-hardwood-french-doors" title="Flockton - hardwood french doors" class="">Flockton - hardwood french doors</a>
<div class="141">
<img src="assets/images/dropdowns/patio/flockton.jpg" alt="" />
<h2>
<span>French Doorsets</span>
Flockton - hardwood french doors
</h2>
<p>Traditional hardwood french doorset</p>
</div>
</li>
<li class="145">
<a href="/patiodoors/french-doorsets/rio-hardwood-french-doors" title="Rio - oak french doorset" class="">Rio - oak french doorset</a>
<div class="145">
<img src="assets/images/dropdowns/patio/rio.jpg" alt="" />
<h2>
<span>French Doorsets</span>
Rio - oak french doorset
</h2>
<p>Oak french doorset available in 2 attractive designs</p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails2">
<span class="viewAllLink"><a href="patiodoors">View all Patio Doors</a></span>
</div>
</div>
<div id="garagedoors" class="dropDown">
<ul>
<li>
<h2><a title="Garage Doors" href="garagedoors">Garage Doors</a></h2>
<ul><li class="86">
<a href="/garagedoors/timber-side-hung" title="Timber Side Hung" class="">Timber Side Hung</a>
<div class="86">
<img src="assets/images/dropdowns/garage/sidehung.jpg" alt="" />
<h2>
<span>Garage Doors</span>
Timber Side Hung
</h2>
<p>Available in two styles. Solid construction and glazing options.</p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails3">
<span class="viewAllLink"><a href="garagedoors">View all Garage Doors</a></span>
</div>
</div>
<div id="windows" class="dropDown">
<ul>
<li>
<h2><a title="Windows" href="windows">Windows</a></h2>
<ul><li class="87">
<a href="/windows/dreamvu-high-performance-window-range" title="DreamVu™- high performance window range" class="">DreamVu™- high performance window range</a>
<div class="87">
<img src="assets/images/dropdowns/windows/dreamvu.jpg" alt="" />
<h2>
<span>Windows</span>
DreamVu™- high performance window range
</h2>
<p>DreamVu® is JELD-WEN's ground-breaking window for the carbon zero future</p>
</div>
</li>
<li class="103">
<a href="/windows/hi-profile-combi" title="Hi-Profile Combi - fully reversible window range" class="">Hi-Profile Combi - fully reversible window range</a>
<div class="103">
<img src="assets/images/dropdowns/windows/hiprofile.jpg" alt="" />
<h2>
<span>Windows</span>
Hi-Profile Combi - fully reversible window range
</h2>
<p>Fully reversible softwood timber window available in all timber and aluminium clad</p>
</div>
</li>
<li class="102">
<a href="/windows/tilt-turn" title="Tilt &amp; Turn" class="">Tilt &amp; Turn</a>
<div class="102">
<img src="assets/images/dropdowns/windows/tiltturn.jpg" alt="" />
<h2>
<span>Windows</span>
Tilt &amp; Turn
</h2>
<p>JELD-WEN Tilt &amp; Turn is a new and unique window design to the UK market</p>
</div>
</li>
<li class="104">
<a href="/windows/fully-glazed-sliding-sash" title="Fully Glazed Sliding Sash" class="">Fully Glazed Sliding Sash</a>
<div class="104">
<img src="assets/images/dropdowns/windows/fullyglazed-slidingsash.jpg" alt="" />
<h2>
<span>Windows</span>
Fully Glazed Sliding Sash
</h2>
<p>Combining an authentic period feel with all the practical benefits of modern windows</p>
</div>
</li>
<li class="107">
<a href="/windows/sovereign-stormsure-casement" title="Sovereign Stormsure Casement" class="">Sovereign Stormsure Casement</a>
<div class="107">
<img src="assets/images/dropdowns/windows/sovereign-casement.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Casement
</h2>
<p>Traditional timber casement window available in softwood, hardwood or oak</p>
</div>
</li>
<li class="108">
<a href="/windows/sovereign-stormsure-designer-range" title="Sovereign Stormsure Designer Range" class="">Sovereign Stormsure Designer Range</a>
<div class="108">
<img src="assets/images/dropdowns/windows/sovereign-designer.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Designer Range
</h2>
<p>Standard and bespoke shaped timber windows</p>
</div>
</li>
<li class="109">
<a href="/windows/sovereign-stormsure-bay-windows" title="Sovereign Stormsure Bay Windows" class="">Sovereign Stormsure Bay Windows</a>
<div class="109">
<img src="assets/images/dropdowns/windows/sovereign-bay.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Bay Windows
</h2>
<p>A design and solution to suit most bay window applications</p>
</div>
</li>
<li class="110">
<a href="/windows/sovereign-stormsure-cottage" title="Sovereign Stormsure Cottage" class="">Sovereign Stormsure Cottage</a>
<div class="110">
<img src="assets/images/dropdowns/windows/sovereign-cottage.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Cottage
</h2>
<p>The popular cottage conservation style timber window</p>
</div>
</li>
<li class="111">
<a href="/windows/sovereign-stormsure-horizontal-bar" title="Sovereign Stormsure Horizontal Bar" class="">Sovereign Stormsure Horizontal Bar</a>
<div class="111">
<img src="assets/images/dropdowns/windows/sovereign-hbar.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Horizontal Bar
</h2>
<p>Horizontal bar design timber window</p>
</div>
</li>
<li class="112">
<a href="/windows/sovereign-stormsure-all-bar-sdl-casement" title="Sovereign Stormsure All Bar" class="">Sovereign Stormsure All Bar</a>
<div class="112">
<img src="assets/images/dropdowns/windows/sovereign-allbar.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure All Bar
</h2>
<p>Traditional all bar design softwood timber window</p>
</div>
</li>
<li class="113">
<a href="/windows/sovereign-stormsure-regency" title="Sovereign Stormsure Regency" class="">Sovereign Stormsure Regency</a>
<div class="113">
<img src="assets/images/dropdowns/windows/sovereign-regency.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Regency
</h2>
<p>Classic regency style timber windows in a range of bar designs</p>
</div>
</li>
<li class="114">
<a href="/windows/sovereign-stormsure-deco" title="Sovereign Stormsure Deco" class="">Sovereign Stormsure Deco</a>
<div class="114">
<img src="assets/images/dropdowns/windows/sovereign-deco.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Deco
</h2>
<p>Equally spaced horizontal bars giving the look of the deco era</p>
</div>
</li>
<li class="115">
<a href="/windows/sovereign-stormsure-victorian-bar" title="Sovereign Stormsure Victorian Bar" class="">Sovereign Stormsure Victorian Bar</a>
<div class="115">
<img src="assets/images/dropdowns/windows/sovereign-victorianbar.jpg" alt="" />
<h2>
<span>Windows</span>
Sovereign Stormsure Victorian Bar
</h2>
<p>Upper window bar detail in keeping with the victorian style</p>
</div>
</li>
<li class="116">
<a href="/windows/commercial-fenestration" title="Commercial Fenestration" class="">Commercial Fenestration</a>
<div class="116">
<img src="assets/images/dropdowns/windows/commercial-fenestration.jpg" alt="" />
<h2>
<span>Windows</span>
Commercial Fenestration
</h2>
<p>Efficient, sustainable and low maintenance windows and doors</p>
</div>
</li>
<li class="105">
<a href="/windows/feature-windows-door-frames" title="Feature Windows &amp; Door Frames" class="">Feature Windows &amp; Door Frames</a>
<div class="105">
<img src="assets/images/dropdowns/windows/feature-windowsdoors.jpg" alt="" />
<h2>
<span>Windows</span>
Feature Windows &amp; Door Frames
</h2>
<p>Combined window and door frame joinery</p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails4">
<span class="viewAllLink"><a href="windows">View all Windows</a></span>
</div>
</div>
<div id="stairs" class="dropDown">
<ul>
<li>
<h2><a title="Stairs" href="stairs">Stairs</a></h2>
<ul><li class="386">
<a href="/stairs/contemporary-staircase-range" title="Contemporary Staircase Range" class="">Contemporary Staircase Range</a>
<div class="386">
<img src="assets/images/dropdowns/stairs/contemporary2.jpg" alt="" />
<h2>
<span>Stairs</span>
Contemporary Staircase Range
</h2>
<p>New for 2010 our Liscard and Hadley ranges offer a bespoke selection of contemporary stair balustrade designs.</p>
</div>
</li>
<li class="387">
<a href="/stairs/oak-staircase-range" title="Oak Staircase Range" class="">Oak Staircase Range</a>
<div class="387">
<img src="assets/images/dropdowns/stairs/oak.jpg" alt="" />
<h2>
<span>Stairs</span>
Oak Staircase Range
</h2>
<p>Our premium Oak stair range combines the best materials with quality craftsmanship.</p>
</div>
</li>
<li class="388">
<a href="/stairs/distinctive-staircase-range" title="Distinctive Staircase Range" class="">Distinctive Staircase Range</a>
<div class="388">
<img src="assets/images/dropdowns/stairs/distinctive.jpg" alt="" />
<h2>
<span>Stairs</span>
Distinctive Staircase Range
</h2>
<p>Our Distinctive stair range allows customisation of your stairs with all the main elements.</p>
</div>
</li>
<li class="413">
<a href="/stairs/home-improvement-and-space-saver-stairs" title="Home Improvement and Space Saver Stairs" class="">Home Improvement and Space Saver Stairs</a>
<div class="413">
<img src="assets/images/dropdowns/stairs/space.jpg" alt="" />
<h2>
<span>Stairs</span>
Home Improvement and Space Saver Stairs
</h2>
<p>The spacesaver timber staircase is the ideal solution for loft conversions</p>
</div>
</li>
<li class="414">
<a href="/stairs/fine-flight-stockcase-stair-range" title="FineFlight Stock Staircase Range" class="">FineFlight Stock Staircase Range</a>
<div class="414">
<img src="assets/images/dropdowns/stairs/straight-flights.jpg" alt="" />
<h2>
<span>Stairs</span>
FineFlight Stock Staircase Range
</h2>
<p>Stairs with strong and solid wood, treads are made from whitewood string MDF and ply riser as standard.</p>
</div>
</li>
<li class="152">
<a href="/stairs/common-stairs" title="Common Stairs" class="">Common Stairs</a>
<div class="152">
<img src="assets/images/dropdowns/stairs/common.jpg" alt="" />
<h2>
<span>Stairs</span>
Common Stairs
</h2>
<p>Our range has been proven to
meet even the most exacting performance standards.</p>
</div>
</li>
<li class="420">
<a href="/stairs/fire-retardant-stairs" title="Fire Retardant Stairs" class="">Fire Retardant Stairs</a>
<div class="420">
<img src="assets/images/dropdowns/stairs/fire.jpg" alt="" />
<h2>
<span>Stairs</span>
Fire Retardant Stairs
</h2>
<p>Safety and Performance as Standard</p>
</div>
</li>
<li class="514">
<a href="/stairs/quick-lock-installation-system" title="Quick-Lock Installation System" class="">Quick-Lock Installation System</a>
<div class="514">
<img src="assets/images/webquicklock.bmp" alt="" />
<h2>
<span>Stairs</span>
Quick-Lock Installation System
</h2>
<p>This system means staircase installation can be done in just one third of the time taken using traditional fixing methods
</p>
</div>
</li>
<li class="153">
<a href="/stairs/stair-components" title="Stair Components" class="">Stair Components</a>
<div class="153">
<img src="assets/images/dropdowns/stairs/components.jpg" alt="" />
<h2>
<span>Stairs</span>
Stair Components
</h2>
<p>Handrails, balustrade and newels - wide chioce of stair parts available</p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails5">
<span class="viewAllLink"><a href="stairs">View all Stairs</a></span>
</div>
</div>
<div id="door-frames" class="dropDown">
<ul>
<li>
<h2><a title="Door Frames" href="door-frames">Door Frames</a></h2>
<ul><li class="89">
<a href="/door-frames/external-door-frames" title="External Door Frames" class="">External Door Frames</a>
<div class="89">
<img src="assets/images/dropdowns/frames/external.jpg" alt="" />
<h2>
<span>Door Frames</span>
External Door Frames
</h2>
<p>Our external door frames are designed for long-lasting performance and easy installation</p>
</div>
</li>
<li class="146">
<a href="/door-frames/external-french-casement" title="External French Casement" class="">External French Casement</a>
<div class="146">
<img src="assets/images/dropdowns/frames/french.jpg" alt="" />
<h2>
<span>Door Frames</span>
External French Casement
</h2>
<p>Our wide selection of external door frames perfectly complement our external door ranges</p>
</div>
</li>
<li class="147">
<a href="/door-frames/fire-resisting-door-frames" title="Fire Resisting Door Frames" class="">Fire Resisting Door Frames</a>
<div class="147">
<img src="assets/images/dropdowns/frames/fire.jpg" alt="" />
<h2>
<span>Door Frames</span>
Fire Resisting Door Frames
</h2>
<p>We offer hardwood 60-min and softwood 30-min fire resisting door frames for internal and external use</p>
</div>
</li>
<li class="148">
<a href="/door-frames/front-entrance" title="Front Entrance" class="">Front Entrance</a>
<div class="148">
<img src="assets/images/dropdowns/frames/front-entrance.jpg" alt="" />
<h2>
<span>Door Frames</span>
Front Entrance
</h2>
<p></p>
</div>
</li>
<li class="149">
<a href="/door-frames/garage-door-frames" title="Garage Door Frames" class="">Garage Door Frames</a>
<div class="149">
<img src="assets/images/dropdowns/frames/garage.jpg" alt="" />
<h2>
<span>Door Frames</span>
Garage Door Frames
</h2>
<p></p>
</div>
</li>
<li class="150">
<a href="/door-frames/sidelights" title="Sidelights" class="">Sidelights</a>
<div class="150">
<img src="assets/images/dropdowns/frames/sidelights.jpg" alt="" />
<h2>
<span>Door Frames</span>
Sidelights
</h2>
<p></p>
</div>
</li>
</ul>
</li>
</ul>
<div class="dropDownDetails" id="dropDownDetails6">
<span class="viewAllLink"><a href="door-frames">View all Door Frames</a></span>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.jeldwen.co.uk/assets/templates/jeld/js/jeldwen_min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment