Difference between revisions of "Team:Cologne-Duesseldorf/Test2"

Line 8: Line 8:
  
 
<style>
 
<style>
 +
* {
 +
  box-sizing: border-box;
 +
  font-family: "Quicksand", sans-serif;
 +
}
 +
 
#bodyContent nav {
 
#bodyContent nav {
 
   border-top: 1px solid #ddd;
 
   border-top: 1px solid #ddd;
Line 19: Line 24:
  
 
#bodyContent .menu {
 
#bodyContent .menu {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   flex-direction: row;
+
   -webkit-box-orient: horizontal;
−
   justify-content: space-between;
+
  -webkit-box-direction: normal;
−
 
+
      -ms-flex-direction: row;
−
  li {
+
          flex-direction: row;
−
    display: block;
+
   -webkit-box-pack: justify;
−
    list-style-type: none;
+
      -ms-flex-pack: justify;
−
    text-transform: uppercase;
+
          justify-content: space-between;
−
  }
+
}
−
 
+
#bodyContent .menu li {
−
  li a {
+
  display: block;
−
    display: flex;
+
  list-style-type: none;
−
    text-align: center;
+
  text-transform: uppercase;
−
    text-decoration: none;
+
}
−
    color: #777;
+
#bodyContent .menu li a {
−
    padding: 1rem;
+
  display: -webkit-box;
−
  }
+
  display: -ms-flexbox;
−
 
+
  display: flex;
−
  li a:hover {
+
  text-align: center;
−
    background: #777;
+
  text-decoration: none;
−
    color: #fff;
+
  color: #777;
−
  }
+
  padding: 1rem;
 +
}
 +
#bodyContent .menu li a:hover {
 +
  background: #777;
 +
  color: #fff;
 
}
 
}
  
Line 65: Line 76:
 
}
 
}
  
−
#bodyContent .sub-menu {
+
#bodyContent .sub-menu li {
−
   li {
+
   display: -webkit-box;
−
    display: flex;
+
  display: -ms-flexbox;
−
    padding-right: 2em;
+
  display: flex;
−
  }
+
  padding-right: 2em;
−
 
+
}
−
  li:hover,
+
#bodyContent .sub-menu li:hover,
−
  li a:hover {
+
#bodyContent .sub-menu li a:hover {
−
    background: #ddd;
+
  background: #ddd;
−
    color: #777;
+
  color: #777;
−
  }
+
 
}
 
}
  
Line 83: Line 93:
 
}
 
}
  
−
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after{
+
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
−
   transform: rotate(-90deg);
+
   -webkit-transform: rotate(-90deg);
 +
          transform: rotate(-90deg);
 +
  -webkit-transition: -webkit-transform 0.5s;
 +
  transition: -webkit-transform 0.5s;
 
   transition: transform 0.5s;
 
   transition: transform 0.5s;
 +
  transition: transform 0.5s, -webkit-transform 0.5s;
 
}
 
}
  

Revision as of 11:03, 29 October 2017