Examples - Dropdown Menue with Pure CSS
Dropdown menues are nice for the fact that the user does not have to click so often. However I find them are rather inconvinient on smartphones. The examples are modified and adapted based on works by Tomas Bagdanavičius.
Working Example Dropdown Horizontal Working Example Dropdown Horizontal Columnar
Working Example Dropdown Horizontal
Contacto
The example uses a graphic background_active.png with gradient colour. This could be skipped or replaced by native CSS 3 features.
Example entry for <Head> section
<link rel="stylesheet" href="../css/navigation/dropdown_horizontal.css" type="text/css" />
ul.ddh, ul.ddh li, ul.ddh ul {list-style: none; margin: 0; padding: 0;}
ul.ddh {position: relative; z-index: 597; float: left; width: 100%; border-top:1px #333 solid; border-bottom:1px #333 solid; background:#c0c0c0 url("background_active.png") repeat-x center right;}
ul.ddh li {float: left; line-height: 1.3em; vertical-align: middle;}
ul.ddh li.hover, ul.ddh li:hover {position: relative; z-index: 599; cursor: default;}
ul.ddh ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
ul.ddh ul li {float: none;}
ul.ddh ul ul {top: 1px; left: 99%;}
ul.ddh li:hover > ul {visibility: visible;}
ul.ddh li {padding: 7px 0; background-color: #426bc6; color: #ffffff; line-height: normal; background:#c0c0c0 url("background_active.png") repeat-x center right;}
ul.ddh a:link, ul.ddh a:visited {color: #ffffff; text-decoration: none;}
ul.ddh a:hover {background-color: #bdcaed; color: #000000; text-decoration: none;}
ul.ddh a:active {color: #000000;}
ul.ddh ul {width: 170px; background-color: #426bc6; color: #ffffff; text-transform: none;}
ul.ddh ul li {background-color: transparent; color: #000000;}
ul.ddh ul li.hover, ul.ddh ul li:hover {background-color: transparent;}
ul.ddh ul a:link, ul.ddh ul a:visited {color: #ffffff;}
ul.ddh ul a:hover {color: #ffffff; text-decoration: none;}
ul.ddh ul a:active {color: #ffffff;}
ul.ddh *.dir {padding-right: 12px; background-image: none; background-position: 100% 50%; background-repeat: no-repeat;}
ul.ddh li a {display: block; padding: 7px 14px;}
ul.ddh li {padding: 0;}
ul.ddh li.dir {padding: 7px 20px 7px 14px;}
ul.ddh ul li.dir {padding-right: 15px;}
ul.ddh ul a {padding: 4px 5px 4px 14px; width: 151px;}
ul.ddh ul a:hover {background-color: #bdcaed; color: #000000;}
ul.ddh a.open {background-color: #bdcaed; color: #000000;}
ul.ddh ul a.open {background-color: #bdcaed; color: #000000;}
ul.ddh li:hover > a.dir {background-color: #bdcaed; color: #000000;}
ul.ddh ul li:hover > a.dir {background-color: #bdcaed; color: #000000;}
Working Example Dropdown Horizontal Columnar
Blog
Blog
- Artikel
- Maschinenbau
- Wellness
- Persönlich
- Reisehinweise
- Photos
- World
- Tibet Special
- Calendars
- Contact
Example entry for <Head> section
<link rel="stylesheet" href="../css/navigation/dropdown_horizontal_columnar.css" type="text/css" />
CSS dropdown_horizontal_columnar.css
.dropdown-upward {margin-top: 400px !important;}
ul.dropdown, ul.dropdown li, ul.dropdown ul {list-style: none;margin: 0;padding: 0;}
ul.dropdown {position: relative; z-index: 597; float: left;background:#426bc6;}
ul.dropdown li {float: left;vertical-align: middle; zoom: 1;}
ul.dropdown li.hover, ul.dropdown li:hover {position: relative;z-index: 599;cursor: default;}
ul.dropdown ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 98%;}
ul.dropdown ul li {float: none;}
ul.dropdown ul ul {top: 1px;left: 99%;}
ul.dropdown li:hover > ul {visibility: visible;}
ul.dropdown-linear {width: 100%;}
ul.dropdown-linear ul li {float: left;}
ul.dropdown-linear li.hover, ul.dropdown-linear li:hover {position: static;}
ul.dropdown-linear ul ul {display: none !important;}
ul.dropdown-columnar ul li {position: static;width: 190px;}
ul.dropdown-columnar ul ul {display: block !important;position: static;width: auto !important;}
ul.dropdown-columnar ul ul li {float: none;}
ul.dropdown-columnar ul ul ul {display: none;}
ul.dropdown-columnar li.hover ul, ul.dropdown-columnar li:hover ul {visibility: visible !important;}
ul.dropdown li {background-color: transparent;color: #000;}
ul.dropdown li.last ul li {float: right;}
ul.dropdown li.hover, ul.dropdown li:hover {background-color: #bdcaed;color: #000;}
ul.dropdown a {color: #fff;}
ul.dropdown a:link, ul.dropdown a:visited {text-decoration: none;}
ul.dropdown a:hover {color: #000;}
ul.dropdown a:active {color: #000; text-decoration:underline;}
ul.dropdown ul {background-color: #bdcaed;}
* html ul.dropdown ul {width: 960px;}
ul.dropdown ul li {font-weight: bold;}
ul.dropdown ul ul {margin-top: 5px;}
ul.dropdown ul ul li {font-weight: normal;}
ul.dropdown *.dir {padding-right: 30px;}
ul.dropdown ul *.dir {background-image: none;}
ul.dropdown li a {display: block;padding: 7px 14px;}
ul.dropdown li {padding: 0;}
ul.dropdown li.dir {padding: 0 30px 0 10px;}
ul.dropdown ul li.dir {padding: 10px;}
ul.dropdown ul {padding: 0 10px;}
ul.dropdown ul a {color: #000;width: 190px;padding: 3px 5px;}
ul.dropdown ul a:hover {background-color: #426bc6;color: #fff;}
ul.dropdown ul ul {padding: 0;margin-left: -5px;}
Content
Fluid Technology Net Technology Designer
Strömungsmechanik