Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 05.02.2014, 18:00
explanator explanator ist offline
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Menüs sind nicht einfach zu verstehen und auch schwierig zu erklären.

Daher hier der Code:
HTML-Code:
<head>        
    <meta charset="utf-8">        
    <title>Tasty Testseite         
    </title>        
    <style>
        #menu {margin-left:50%;}    
        #menu ul {margin:0; margin-left:-50%; }
        #menu > ul > li {width:130px; float:left; background-color:green; list-style:none; margin:0; padding:0;height: 1.2em;}
        #menu ul li:after {clear:both;}
        #menu > ul > li:first-child {background-color:red;}
        #menu ul ul {position:relative; background-color:yellow; display:inline-block; left:-1500%; padding:2px 5px 5px 0;}
        #menu ul ul li {display:block; background-color:yellow;}
        #menu > ul > li:hover ul, #menu ul ul:hover {left:50%; Z-index:10;}
    </style>
</head>    
<body>        
    <div id="menu">            
        <ul>                  
            <li>                      
                <a href="#">TAB a</a>                    
                <ul>                          
                    <li><a href="#">aaaaaaaaa</a></li>                  
                    <li><a href="#">aaaaaaaaaaaaaaaaaa</a></li>                  
                    <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>            
                </ul>            
            </li>              
            <li>                  
                <a href="#1">Tab b</a>                
                <ul>                      
                    <li><a href="#1">bbbbbbbb</a></li>              
                    <li><a href="#1">bbbbbbbbbbbbbbbbbbb</a></li>              
                    <li><a href="#1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></li>            
                </ul>            
            </li>            
        </ul>        
    </div>    
</body>
</html>
getestet in Firefox, Chrome und IE8.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links