Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"

Line 1: Line 1:
 
<html>
 
<html>
−
/* These styles create the dropdown menus. */
+
#menu{
−
#navbar {
+
position:relative;
−
  position: static;
+
background: #ddeebb;
−
  padding: .5em 3 .5em 3;
+
width:1900px;
−
  float: left;  
+
height:45px;
−
  background: #ddeebb;
+
}
−
  width: 100%;
+
#submenu{
−
  text-align: center;
+
background: #f6f0cc;
−
  margin: 0;
+
width:1900px;
 +
height:0px;
 +
overflow:hidden;
 +
transition: height 0.2s;
 +
}
 +
#menu1{
 +
margin-left:200px;
 +
}
 +
#menu a, #submenu a {
 +
    position:relative;
 +
    font-weight: bold;
 +
    text-align: center;
 +
    line-height: 45px;
 +
    width:270px;
 +
    display:block;
 +
    text-decoration: none;
 +
    float: left;
 +
    color: #004415;
 
}
 
}
  
−
#navbar ul {
+
#menu1:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover{
−
  list-style: none;
+
color: #9DC671;
−
  margin: 0;
+
}
−
  padding: 0;
+
 
−
  position: static;
+
#sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{
−
  height:200px;}
+
color: #9DC671;
−
   
+
}
−
#navbar li {
+
 
−
  list-style: none;
+
#sub2,#sub3,#sub4,#sub5{
−
  float: left;
+
width: 100%;
−
  margin: 0;
+
height:100%;
−
  padding: 0;
+
}
−
  display: inline;
+
 
−
  position: static;}  
+
#sub2a{
−
 
+
margin-left: 65px;
−
#navbar li a {
+
}
−
  display: block;
+
#sub3a{
−
  padding: .3em .4em .3em .4em;
+
margin-left: 605px;
−
  text-transform: none;
+
}
−
  text-decoration: none;  
+
#sub4a{
−
  color: #004415; 
+
margin-left: 740px;
−
  font-weight: bold;   }  
+
}
−
 
+
#sub5a{
−
#navbar li a:hover {
+
margin-left: 1280px;
−
  color: #f6f0cc; }
+
}
−
 
+
 
−
#navbar li ul {
+
#sub2,#sub3,#sub4,#sub5{
−
  display: none; }
+
display:none;
−
 
+
}
−
#navbar li:hover ul, #navbar li.hover ul {
+
 
−
  position: absolute;
+
/*Twitter*/
−
  display: inline;
+
#twitter{
−
  left: 0;
+
display:none;
−
  width: 100%;
+
position:absolute;
−
  margin: 0;
+
left:1560px;
−
  padding: 0; }
+
}
−
 
+
#twitter_logo{
−
#navbar li:hover li, #navbar li.hover li {
+
height:45px;
−
  float: left; }
+
float:right;
−
 
+
}
−
#navbar li:hover li a, #navbar li.hover li a {
+
/*FB*/
−
  color: #000; }
+
#facebook{
−
 
+
display:none;
−
#navbar li li a:hover {
+
position:absolute;
−
  color: #357; }
+
left:1630px;
 +
}
 +
#facebook_logo{
 +
height:45px;
 +
float:right;
 +
}
 
</html>
 
</html>

Revision as of 16:46, 2 May 2015

#menu{ position:relative; background: #ddeebb; width:1900px; height:45px; } #submenu{ background: #f6f0cc; width:1900px; height:0px; overflow:hidden; transition: height 0.2s; } #menu1{ margin-left:200px; } #menu a, #submenu a { position:relative; font-weight: bold; text-align: center; line-height: 45px; width:270px; display:block; text-decoration: none; float: left; color: #004415; } #menu1:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover{ color: #9DC671; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5{ width: 100%; height:100%; } #sub2a{ margin-left: 65px; } #sub3a{ margin-left: 605px; } #sub4a{ margin-left: 740px; } #sub5a{ margin-left: 1280px; } #sub2,#sub3,#sub4,#sub5{ display:none; } /*Twitter*/ #twitter{ display:none; position:absolute; left:1560px; } #twitter_logo{ height:45px; float:right; } /*FB*/ #facebook{ display:none; position:absolute; left:1630px; } #facebook_logo{ height:45px; float:right; }