User:SvenB/DropTest

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
     <head>
     <head>
         <meta charset="utf-8">
         <meta charset="utf-8">
-
         <title>CSS3 Dropdown Menu von designyourweb.info</title>
+
         <title>CSS3 Dropdown Menu von designyourweb</title>
         <style>
         <style>
 +
nav {
 +
    width: 960px;
 +
}
nav ul {
nav ul {
     padding: 0px;
     padding: 0px;
     margin: 0px;
     margin: 0px;
-
 
-
    box-shadow: 2px 2px 2px #dfdfdf;
 
}
}
-
 
+
nav ul:after {
-
nav ul li {
+
    clear: both;
-
list-style: none;
+
    content: " ";
 +
    display: block;
 +
    font-size: 0;
 +
    height: 0;
 +
    visibility: hidden;
 +
}
 +
    nav ul,nav ul li{
 +
    background-color: #FAFAFA;
 +
}
 +
    nav ul li {
 +
    list-style: none;
     float:left;
     float:left;
-
    border-right: 1px solid #dfdfdf;
 
}
}
-
 
nav ul li a {
nav ul li a {
     text-decoration: none;
     text-decoration: none;
Line 22: Line 31:
     color: #333;
     color: #333;
     padding: 14px 34px 14px 34px;
     padding: 14px 34px 14px 34px;
-
    transition: background 0.3s ease-out 0s;
 
-
}
 
-
 
-
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {
 
-
    background-color: #E6DD00;
 
-
}
 
-
 
-
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {
 
-
    background-color: #8CB302;
 
-
}
 
-
 
-
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
 
-
    background-color: #008C74;
 
-
}
 
-
 
-
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
 
-
    background-color: #004C66;
 
}
}
-
 
+
nav ul li:hover > ul {
-
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
+
     visibility: visible;
-
     background-color: #332B40;
+
}
}
-
 
+
nav ul li ul{
-
nav ul li:hover > a {
+
     display: inline;
-
     color: #FAFAFA;
+
    visibility: hidden;
 +
    position: absolute;
 +
    padding:0px;
}
}
-
 
+
nav ul li ul li{
-
nav ul li ul li a {
+
     float: none;
-
     color: #FAFAFA;
+
}
}
-
 
nav ul li ul li a:hover{
nav ul li ul li a:hover{
     color: #333;
     color: #333;
-
    background-color: #FAFAFA !important;
 
}
}

Revision as of 15:48, 5 October 2014

CSS3 Dropdown Menu von designyourweb