Sub Menu & Breadcrumbs

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index bd72b1b4bdb873a37fd634b695a62180ce43eb9f..feb22b2994d448fe0a334cde0d9460cdacb5ca10 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -677,22 +677,9 @@ nav.topMenu {
        box-shadow: 0 0 1px rgba(255, 255, 255, 1);
 }
 
-.mainMenu > ul > li > ul {
-       position: absolute;
-       bottom: -18px;
-       z-index: 1000;
-       white-space: nowrap;
-       font-size: 75%;
-}
-
-.mainMenu > ul > li > ul > li {
-       padding: 0 4px;
-       display: inline-block;
-}
-
 
 
-/* -- -- -- Header/Footer Navigation -- -- -- */
+/* -- -- -- Header/Footer Navigation & Main Menu Sub Menu -- -- -- */
 
 .headerNavigation {
        background-color: #e7f2fd;
@@ -755,6 +742,7 @@ nav.topMenu {
 
 .headerNavigation ul li a:hover,
 .footerNavigation ul li a:hover {
+       text-decoration: none;
        background-color: #d8e7f5;
 }
 
@@ -767,6 +755,21 @@ nav.topMenu {
        width: 0;
 }
 
+/* Sub Menu */
+
+.headerNavigation .subMenu {
+       float: left;
+}
+
+.headerNavigation .subMenu > li {
+       line-height: 1.25;
+}
+
+.headerNavigation .subMenu > li > a {
+       padding-right: 5px;
+       padding-left: 5px;
+}
+
 
 
 /* ############## Main ############## */
@@ -2666,16 +2669,27 @@ input[type='button'],
        overflow: hidden;
 }
 
-.breadcrumbs ul li {
+.breadcrumbs > ul > li {
        font-size: 85%;
        list-style: none;
        float: left;
        position: relative;
+       max-width: 30%;
+       
+       -webkit-transition: max-width .2s linear;
+       -moz-transition: max-width .2s linear;
+       -ms-transition: max-width .2s linear;
+       -o-transition: max-width .2s linear;
+       transition: max-width .2s linear;
+}
+
+.breadcrumbs > ul > li:hover {
+       max-width: 100%;
 }
 
 /* Arrow */
 
-.breadcrumbs ul li > span {
+.breadcrumbs > ul > li > span {
        border-width: 15px;
        border-style: solid none solid solid;
        border-color: transparent transparent transparent #ccc;
@@ -2688,7 +2702,7 @@ input[type='button'],
        z-index: 100;
 }
 
-.breadcrumbs ul li > .pointer > span {
+.breadcrumbs > ul > li > .pointer > span {
        text-indent: -9000px;
        border-width: 15px;
        border-style: solid none solid solid;
@@ -2704,7 +2718,7 @@ input[type='button'],
 
 /* Caption */
 
-.breadcrumbs ul li a {
+.breadcrumbs > ul > li a {
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
        color: rgba(153, 153, 153, 1);
@@ -2717,7 +2731,7 @@ input[type='button'],
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
-       .breadcrumbs ul li a {
+       .breadcrumbs > ul > li a {
                max-width: 250px;
        }
        
@@ -2725,13 +2739,13 @@ input[type='button'],
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
-       .breadcrumbs ul li a {
+       .breadcrumbs > ul > li a {
                max-width: 100px;
        }
        
 }
 
-.breadcrumbs ul li:first-child a {
+.breadcrumbs > ul > li:first-child a {
        border-radius: 5px 0 0 5px;
        background-image: url('../../icon/home1.svg');
        background-position: 7px center;
@@ -2740,14 +2754,14 @@ input[type='button'],
        padding-left: 30px;
 }
 
-.breadcrumbs ul li:hover a {
+.breadcrumbs > ul > li:hover a {
        color: rgba(102, 102, 102, 1);
        background-color: #f9f9f9;
        position: relative;
        z-index: 90;
 }
 
-.breadcrumbs ul li:hover > .pointer > span {
+.breadcrumbs > ul > li:hover > .pointer > span {
        border-color: transparent transparent transparent #f9f9f9;
 }