[dropdown] [dropdown-option]Pick a category[/dropdown-option] [dropdown-option value=”option1″]Mechanical[/dropdown-option] [dropdown-option value=”option2″]Safety & Security[/dropdown-option] [dropdown-option value=”option3″]Interior[/dropdown-option] [/dropdown] [dropdown-option value=”option4″]Interior[/dropdown-option] [/dropdown] [dropdown-content value=”option1″]
Mechanical
Horsepower* 232 HP 232 HP 232 HP
Engine 2.0L EcoBoost® 2.0L EcoBoost® 2.0L EcoBoost®
Torque* 388 Nm 388 Nm 388 Nm
Drive Configuration FWD FWD FWD
Transmission 8-AT 8-AT 8-AT
Fuel Economy (Km/L) 15.3 km/l 15.3 km/l 15.3 km/l
Selectable Drive Modes Sport, Eco Sport, Eco Sport, Eco
Safety & Security
SOS Post-Crash Alert System™✔                         ✔                     ✔                          
Perimeter Alarm
Individual Tire Pressure Monitoring System (TPMS)
Airbags666
Door Locks
Child Restraint (Iso-Fix)
Safety Belts
Auto-Dimming Rearview MirrorXX
Interior
SeatsFabricPlush Fabric Inserts / Leather bolderSuede inserts/ Premium leather bolster
Air ConditioningSingle AutoDual-zoneDual-zone
No. Of Seats555
Seating Control6-way manual8-way power driver / 6-way passenger10-way power driver / 6-way power passenger
Power Outlets1 (12V)1 (12V)1 (12V)
USBs✔✔✔
LightingXXAmbient (7 colors)
Exterior
Grille Static Static Dynamic
Fog Lamps LED LED LED
Head Lamps LED Lamps Auto High Beams Auto High Beams
Tail Lamps LED LED LED
Bodystyle 4-door 4-door 4-door
Exhaust Dual Outlet Dual Outlet Dual Outlet
Wheel Spcs 17″ Alloy 18″ Alloy 19″ Alloy
Tyre Spcs 235/55 R17 235/50 R18 235/45 R19
Liftgate / Swing gate Manual Manual Manual
Sideview Mirrors Power: manual fold Power: Auto Fold Power: Auto Fold
Sunroof / Roof Type Moonroof Moonroof Dual Panel Pano Roof
Driver-Assist Technology
Sensing System ✔ ✔ ✔
Camera Aid Rear-view camera Rear-view camera Rear-view camera
Cruise Control X ✔ Adaptive
Ford Co-Pilot360™ X BLIS, collision mitigation sys: AEB, Forward collision warning, lane keeping / departure warning, rear park sesnors, driver impairment monitor BLIS, collision mitigation sys: AEB, Forward collision warning, lane keeping / departure warning, rear park sesnors, driver impairment monior,intersection pre-collision assist, emergency steering assist
In-Car Entertainment (ICE)
Bluetooth
Audio 6 Speakers 6 Speakers 6 Speakers
Infotainment (Sync®) SYNC®4 Sync®4 Sync®4
Cluster Productivity Screen 8″ Digital 8″ Digital 8″ Digital
Screen In Center Stack 13.2” touch screen 13.2” touch screen 13.2” touch screen
Wireless Charging Pad
[/dropdown-content] [dropdown-content value=”option2″]
Safety & Security
SOS Post-Crash Alert System™✔                         ✔                     ✔                          
Perimeter Alarm
Individual Tire Pressure Monitoring System (TPMS)
Airbags666
Door Locks
Child Restraint (Iso-Fix)
Safety Belts
Auto-Dimming Rearview MirrorXX
[/dropdown-content] [dropdown-content value=”option3″]
Interior
SeatsFabricPlush Fabric Inserts / Leather bolderSuede inserts/ Premium leather bolster
Air ConditioningSingle AutoDual-zoneDual-zone
No. Of Seats555
Seating Control6-way manual8-way power driver / 6-way passenger10-way power driver / 6-way power passenger
Power Outlets1 (12V)1 (12V)1 (12V)
USBs✔✔✔
LightingXXAmbient (7 colors)
[/dropdown-content] [dropdown-content value=”option4″]
Exterior
Grille Static Static Dynamic
Fog Lamps LED LED LED
Head Lamps LED Lamps Auto High Beams Auto High Beams
Tail Lamps LED LED LED
Bodystyle 4-door 4-door 4-door
Exhaust Dual Outlet Dual Outlet Dual Outlet
Wheel Spcs 17″ Alloy 18″ Alloy 19″ Alloy
Tyre Spcs 235/55 R17 235/50 R18 235/45 R19
Liftgate / Swing gate Manual Manual Manual
Sideview Mirrors Power: manual fold Power: Auto Fold Power: Auto Fold
Sunroof / Roof Type Moonroof Moonroof Dual Panel Pano Roof
[/dropdown-content]
/* ========================================== FINAL.CSS These are the final styles for the project. Course: CSS3 in 30 Days Author: Brad Hussey Website: codecollege.ca ========================================== */ /* ========================= DROPDOWN MENU ========================= */ .final__dropdown{ position: relative; z-index: 10; display: inline-block; } .final__dropdown__hover{ display: inline-block; padding: 10px; background-color:#323b40; color: #ffffff; border:0 solid #323b40; cursor: pointer; } .final__dropdown__hover:hover{background-color: #222222;} .final__dropdown__menu{ position: absolute; display: none; top: 100%; left: 0; min-width: 200px; background-color: #ffffff; color: #323b40; box-shadow: 0 3px 2px rgba(0,0,0,0.3); } .final__dropdown:hover .final__dropdown__menu{display: block;} .final__dropdown__menu a{ display: block; padding: 10px; text-decoration: none; border-width: 0; border-top: 1px solid #e0e0e0; } .final__dropdown__menu a:hover{ background-color:#f0f0f0; color: #323b40; }

Day #27 CSS Only Dropdown Menu

Sandbox This is where you play

Instructions: Create a simple Dropdown Menu with CSS!

Dropdown Menu

Final Result Use this for reference!

Dropdown Menu

Information About this lesson

What are we making?

Fun & fancy ways to create a dropdown menu with CSS!

Where can I use it?

In your websites, client projects and applications as a lightweight way to organize navigation menu items!

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.

/* ========================================== FINAL.CSS These are the final styles for the project. Course: CSS3 in 30 Days Author: Brad Hussey Website: codecollege.ca ========================================== */ /* ========================= DROPDOWN MENU ========================= */ .final__dropdown{ position: relative; z-index: 10; display: inline-block; } .final__dropdown__hover{ display: inline-block; padding: 10px; background-color:#323b40; color: #ffffff; border:0 solid #323b40; cursor: pointer; } .final__dropdown__hover:hover{background-color: #222222;} .final__dropdown__menu{ position: absolute; display: none; top: 100%; left: 0; min-width: 200px; background-color: #ffffff; color: #323b40; box-shadow: 0 3px 2px rgba(0,0,0,0.3); } .final__dropdown:hover .final__dropdown__menu{display: block;} .final__dropdown__menu a{ display: block; padding: 10px; text-decoration: none; border-width: 0; border-top: 1px solid #e0e0e0; } .final__dropdown__menu a:hover{ background-color:#f0f0f0; color: #323b40; } Dropdown Menu | Code 30 Things in 30 Days with CSS3

Day #27 CSS Only Dropdown Menu

Sandbox This is where you play

Instructions: Create a simple Dropdown Menu with CSS!

Dropdown Menu

Final Result Use this for reference!

Dropdown Menu

Information About this lesson

What are we making?

Fun & fancy ways to create a dropdown menu with CSS!

Where can I use it?

In your websites, client projects and applications as a lightweight way to organize navigation menu items!

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.

×