diff options
| author | Max Kremmel <xing@synapse.plus.com> | 2009-05-12 17:42:22 +0000 |
|---|---|---|
| committer | Max Kremmel <xing@synapse.plus.com> | 2009-05-12 17:42:22 +0000 |
| commit | 9a4dd84942c23ea969f171851098a42c60d0f06c (patch) | |
| tree | 266f343b6fdcf28776f8dae28d1ce12a408e35bc | |
| parent | ba129a1f9126eee5418cdd9b64c020d4de783983 (diff) | |
| download | themes-9a4dd84942c23ea969f171851098a42c60d0f06c.tar.gz themes-9a4dd84942c23ea969f171851098a42c60d0f06c.tar.bz2 themes-9a4dd84942c23ea969f171851098a42c60d0f06c.zip | |
improve dropdown menu css to make dropdowns easier to navigate. added some notes on why changes were made.
| -rw-r--r-- | css/dropmenu.css | 39 |
1 files changed, 26 insertions, 13 deletions
diff --git a/css/dropmenu.css b/css/dropmenu.css index 0117b62..59ad459 100644 --- a/css/dropmenu.css +++ b/css/dropmenu.css @@ -1,27 +1,40 @@ /* BEGIN css driven dropdown menus - horizontal */ + +/* some notes on the changes i made - these can be removed in due course or moved to the skeleton.css file: + * fixed pixel line-height is needed to move up the nested dropdown by the right amount: + * ul.dropmenu {line-height:x;} + * ul.dropmenu li {padding:y;} + * ul.dropmenu li ul li ul {margin-top:((x + y) * -1)} + * + * removed color ul.dropmenu a {color} since this should not be set in this file + * + * widened the dropmenu slightly to allow avoid line-breaks where possible + * + * - xing - Tuesday May 12, 2009 18:05:16 CEST + */ + /* The top level menu */ ul.dropmenu, -ul.dropmenu ul { padding: 0; margin: 0; list-style: none; line-height: 1; z-index: 1000; } -ul.dropmenu a { display: block; width:100%; color:black; } +ul.dropmenu ul {padding:0; margin:0; list-style:none; line-height:18px; z-index:1000;} +ul.dropmenu a {display:block; width:100%;} ul.dropmenu a:link, -ul.dropmenu a:hover {} +ul.dropmenu a:hover {} /* affects all lists in all menus */ -ul.dropmenu li ul { position: absolute; background: white; left: -999em; z-index: 1002; border:1px solid #999; } -ul.dropmenu>li { float:left;} +ul.dropmenu li ul {position:absolute; background:#fff; left:-999em; z-index:1002; border:1px solid #999;} +ul.dropmenu>li {float:left;} /* affects all items in all menus */ -ul.dropmenu li { text-align:left; padding: 3px;width:auto;} -ul.dropmenu>li>ul li:hover { background-color:#ddd;} +ul.dropmenu li {text-align:left; padding:2px; width:auto;} +ul.dropmenu>li>ul li:hover {background-color:#eee;} /* main drop menu items */ -ul.dropmenu>li>ul li { width: 10em; z-index: 1001; } +ul.dropmenu>li>ul li {width:15em; z-index:1001;} /* submenu lists */ -ul.dropmenu li ul li ul { margin: 0 0 0 10em; z-index: 1003; border:1px solid #ccc; } +ul.dropmenu li ul li ul {margin:-21px 0 0 14em; z-index:1003; border:1px solid #ccc;} ul.dropmenu li:hover ul ul, -ul.dropmenu li.iemenuhover ul ul { left: -999em; } +ul.dropmenu li.iemenuhover ul ul {left:-999em;} /* submenus */ ul.dropmenu li:hover ul, ul.dropmenu li li:hover ul, ul.dropmenu li.iemenuhover ul, -ul.dropmenu li li.iemenuhover ul { left: auto;} -ul.dropmenu .icon {vertical-align:middle; padding:2px 0.6em 2px 0; } +ul.dropmenu li li.iemenuhover ul {left:auto;} +ul.dropmenu .icon {vertical-align:middle; padding:2px 0.2em 2px 0;} /* END css driven drop menus */ - |