html.de - Dynamische Menüs

by SpiceLab

HTML

<nav id="navmenu">
 <ul id="nav">
  <li class="navi">
   <a href="#">link 1</a>
   <ul>
    <li><a href="#">sublink 1</a></li>
   </ul>
  </li>
 </ul>
</nav>

CSS

*{
                margin: 0px;
                padding: 0px;
            }
            ul#nav{
                width: 60%;
                height: 10%;
                display: inline;
            }
            ul#nav li.navi{
                display: inline-block;
            }
            ul#nav ul{
                display: none;
            }
            ul#nav li:hover ul{
                display: block;
                position: absolute;
            }
            ul#nav li.navi ul li{
                display: block;
                width: 100%;
                height: 20%;
            } 


/* Tabletgroesse */
        @media screen and (max-width:750px) {   
                        #seite {
                                height: 2000px;
                                }
                                
                        #logo {
                                display: none;
                        }
                        
                        #kundenleiste {
                                height: 5%;
                                width: 80%;
                        }
                        
                        #navmenu {
                                height: 23%;
                                width: 80.5%;
				font-size: 140%;
				float: left; 
                                /*margin-left: 2%;*/ /* auskommentiert */
                        }
						
                        p.right {
                                font-size: 120%;
                        }
                        
                        #fusszeile {
                                margin-top: 5%;
                        }
						
                }