User:SvenB/DropTest

From 2014.igem.org

< User:SvenB(Difference between revisions)
 
(55 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Tuebingen/Templates/BlankWiki}}
 +
<html>
<html>
     <head>
     <head>
         <meta charset="utf-8">
         <meta charset="utf-8">
-
         <title>CSS3 Dropdown Menu von designyourweb</title>
+
         <title>CSS3 Dropdown Menu von designyourweb.info</title>
         <style>
         <style>
nav {
nav {
Line 8: Line 10:
}
}
nav ul {
nav ul {
-
     padding: 0px;
+
     padding: 0 !important;
-
     margin: 0px;
+
     margin: 0 !important;
 +
 +
text-align: center;
 +
    line-height: 1.5em !important;
     box-shadow: 2px 2px 2px #dfdfdf;
     box-shadow: 2px 2px 2px #dfdfdf;
     -moz-box-shadow: 2px 2px 2px #dfdfdf;
     -moz-box-shadow: 2px 2px 2px #dfdfdf;
     -webkit-box-shadow: 2px 2px 2px #dfdfdf;
     -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
}
 +
nav ul:after {
nav ul:after {
     clear: both;
     clear: both;
Line 19: Line 25:
     display: block;
     display: block;
     font-size: 0;
     font-size: 0;
-
     height: 0;
+
     height: 0 !important;
     visibility: hidden;
     visibility: hidden;
}
}
-
    nav ul,nav ul li{
+
 
 +
nav ul,nav ul li{
     background-color: #FAFAFA;
     background-color: #FAFAFA;
}
}
-
    nav ul li {
+
nav ul li {
-
     list-style: none;
+
     list-style: none;  
-
    float:left;
+
float: none;
 +
display: inline-block;
 +
text-align: left;
 +
        margin-top: -2px;
 +
        margin-left: -4px;
 +
 
 +
    border-right: 2px solid #dfdfdf;
}
}
 +
nav ul li.cat1 {
 +
border-left: 2px solid #dfdfdf;
 +
}
 +
nav ul li a {
nav ul li a {
-
     text-decoration: none;
+
     text-decoration: none !important;
     display: block;
     display: block;
-
     color: #333;
+
     color: #333 !important;
-
     padding: 14px 34px 14px 34px;
+
     padding: 14px 34px 14px 34px !important;
 +
 
 +
    transition: background 0.3s ease-out; /* explorer 10 */
 +
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
 +
    -moz-transition: background 0.3 ease-out; /* firefox */
 +
    -o-transition: background 0.3 ease-out; /* opera */
 +
}
 +
 
 +
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.cat5:hover a, nav ul li.cat5:hover > ul li a {
 +
    background-color: #332B40;
 +
}
 +
nav ul li.cat6:hover a, nav ul li.cat5:hover > ul li a {
 +
    background-color: #332B40;
 +
}
 +
nav ul li.cat7:hover a, nav ul li.cat5:hover > ul li a {
 +
    background-color: #332B40;
 +
}
 +
nav ul li:hover > a {
 +
    color: #FAFAFA !important;
 +
        text-decoration: none !important;
}
}
nav ul li:hover > ul {
nav ul li:hover > ul {
     visibility: visible;
     visibility: visible;
}
}
 +
nav ul li ul{
nav ul li ul{
     display: inline;
     display: inline;
Line 43: Line 92:
     position: absolute;
     position: absolute;
     padding:0px;
     padding:0px;
 +
text-align: inherit;
}
}
nav ul li ul li{
nav ul li ul li{
-
    float: none;
+
float: none;
 +
display: block;
 +
}
 +
nav ul li ul li a {
 +
    color: #FAFAFA !important;
 +
    text-decoration: none !important;
}
}
nav ul li ul li a:hover{
nav ul li ul li a:hover{
-
    color: #333;
+
color: #333 !important;
 +
background-color: #FAFAFA !important;
 +
        text-decoration: none !important;
}
}
Line 54: Line 111:
     </head>
     </head>
     <body>
     <body>
-
        <nav>
+
<div id = "wrapper">
-
            <ul>
+
        <nav>
-
                <li class = "cat1">
+
        <ul>
-
                    <a href="#">Home</a>
+
        <li class = "cat1">
-
                </li>
+
        <a href="#">Home</a>
-
                <li class = "cat2">
+
        </li>
-
                    <a href="#">Über uns</a>
+
        <li class = "cat2">
-
                    <ul>
+
        <a href="#">Project</a>
-
                        <li><a href="#">Wer wir sind</a></li>
+
        <ul>
-
                        <li><a href="#">Was wir machen</a></li>
+
        <li><a href="#">Overview</a></li>
-
                        <li><a href="#">Unsere Ziele</a></li>
+
        <li><a href="#">Motivation</a></li>
-
                        <li><a href="#">Unser Team</a></li>
+
        <li><a href="#">Inteins</a></li>
-
                    </ul>
+
        <li><a href="#">Enzymes</a></li>
-
                </li>
+
        </ul>
-
                <li class = "cat3">
+
        </li>
-
                    <a href="#">Leistungen</a>
+
        <li class = "cat3">
-
                    <ul>
+
        <a href="#">Team</a>
-
                        <li><a href="#">Webdesign</a></li>
+
        <ul>
-
                        <li><a href="#">Programmierung</a></li>
+
        <li><a href="#">About Us</a></li>
-
                        <li><a href="#">Online Marketing</a></li>
+
        <li><a href="#">Attributions</a></li>
-
                        <li><a href="#">Suchmaschinenoptimierung</a></li>
+
        </ul>
-
                    </ul>
+
        </li>
-
                </li>
+
        <li class = "cat4">
-
                <li class = "cat4">
+
        <a href="#">Notebook</a>
-
                    <a href="#">Referenzen</a>
+
        <ul>
-
                    <ul>
+
        <li><a href="#">Protocols</a></li>
-
                        <li><a href="#">Webseiten</a></li>
+
        <li><a href="#">Lab Journal</a></li>
-
                        <li><a href="#">Themes & Templates</a></li>
+
        </ul>
-
                        <li><a href="#">Plugins</a></li>
+
        </li>
-
                    </ul>
+
        <li class = "cat5">
-
                </li>
+
        <a href="#">Activities</a>
-
                <li class = "cat5">
+
        <ul>
-
                    <a href="#">Kontakt</a>
+
        <li><a href="#">SynBio-Day</a></li>
-
                    <ul>
+
        <li><a href="#">School-Project</a></li>
-
                        <li><a href="#">Deutschland</a></li>
+
        <li><a href="#">Aachen Conference</a></li>
-
                        <li><a href="#">Amerika</a></li>
+
        </ul>
-
                        <li><a href="#">Spanien</a></li>
+
        </li>
-
                    </ul>
+
        <li class = "cat6">
-
                </li>
+
        <a href="#">Results</a>
-
            </ul>
+
        <ul>
-
         </nav>
+
        <li><a href="#">List Item</a></li>
 +
        <li><a href="#">List Item</a></li>
 +
        </ul>
 +
        </li>
 +
        <li class = "cat7">
 +
        <a href="#">Contact</a>
 +
 
 +
        </li>
 +
        </ul>
 +
        </nav>
 +
         </div>
     </body>
     </body>
</html>
</html>

Latest revision as of 20:37, 5 October 2014

CSS3 Dropdown Menu von designyourweb.info

Retrieved from "http://2014.igem.org/User:SvenB/DropTest"