michaelsinterface.de

css.dropdownTabmenu

  • In diesem Experiment habe ich ein CSS-Listenmenü in Form eines Dropdown-Menüs mit Tabs entworfen, in denen jeweils sechs nebeneinander ausgerichtete <ul>-Listenelemente mit Untermenüpunkten untergebracht sind.
Quellcode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.dropdownTabmenu:::</title>

<style type="text/css">
<!--
body {
font:x-small Verdana, Arial, Helvetica, sans-serif;
}
ul#tabmenu {
float:left;
}
ul#tabmenu, ul#tabmenu ul {
margin:0;
padding:0;
list-style:none;
position:relative;
}
ul#tabmenu li {
float:left;
width:100px;
}
ul#tabmenu li ul {
position:absolute;
margin-left:-999em;
top:2.4em;
left:0;
width:600px;
}
ul#tabmenu li ul li {
float:left;
width:594px;
padding:2px;
border:1px solid #cfcfcf;
border-top:none;
background:#fff;
}
ul#tabmenu li ul ul {
position:relative;
float:left;
width:94px;
margin:0 5px 0 0;
display:inline;
top:0;
}
ul#tabmenu li ul li li {
width:94px;
padding:0;
margin:3px 0;
border:none;
background:#fff;
}
ul#tabmenu li a {
display:block;
padding:5px;
background:#f5f5f5;
border:1px solid #cfcfcf;
text-decoration:none;
color:#888;
min-height:0;
}
ul#tabmenu li li a {
padding:2px 5px;
background:#fff;
border:none;
color:#3968a6;
}
ul#tabmenu li:hover ul {
margin-left:0;
}
ul#tabmenu li:hover a {
background:#fff;
border-bottom:1px solid #fff;
color:#000;
font-weight:bold;
}
ul#tabmenu li:hover li a {
background:#fff;
color:#3968a6;
font-weight:bold;
}
ul#tabmenu li:hover li a:hover {
background:#3968a6;
color:#fff;
}
-->
</style>

</head>
<body>

<ul id="tabmenu">
    <li><a href="#">Toplink 1</a>
         <ul>
              <li>
                   <ul>
                       <li><a href="#">Sublink 1.1.1</a></li>
                       <li><a href="#">Sublink 1.1.2</a></li>
                       <li><a href="#">Sublink 1.1.3</a></li>
                       <li><a href="#">Sublink 1.1.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 1.2.1</a></li>
                       <li><a href="#">Sublink 1.2.2</a></li>
                       <li><a href="#">Sublink 1.2.3</a></li>
                       <li><a href="#">Sublink 1.2.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 1.3.1</a></li>
                       <li><a href="#">Sublink 1.3.2</a></li>
                       <li><a href="#">Sublink 1.3.3</a></li>
                       <li><a href="#">Sublink 1.3.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 1.4.1</a></li>
                       <li><a href="#">Sublink 1.4.2</a></li>
                       <li><a href="#">Sublink 1.4.3</a></li>
                       <li><a href="#">Sublink 1.4.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 1.5.1</a></li>
                       <li><a href="#">Sublink 1.5.2</a></li>
                       <li><a href="#">Sublink 1.5.3</a></li>
                       <li><a href="#">Sublink 1.5.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 1.6.1</a></li>
                       <li><a href="#">Sublink 1.6.2</a></li>
                       <li><a href="#">Sublink 1.6.3</a></li>
                       <li><a href="#">Sublink 1.6.4</a></li>
                   </ul>
              </li>
         </ul>
    </li>
    <li><a href="#">Toplink 2</a>
         <ul>
              <li>
                   <ul>
                       <li><a href="#">Sublink 2.1.1</a></li>
                       <li><a href="#">Sublink 2.1.2</a></li>
                       <li><a href="#">Sublink 2.1.3</a></li>
                       <li><a href="#">Sublink 2.1.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 2.2.1</a></li>
                       <li><a href="#">Sublink 2.2.2</a></li>
                       <li><a href="#">Sublink 2.2.3</a></li>
                       <li><a href="#">Sublink 2.2.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 2.3.1</a></li>
                       <li><a href="#">Sublink 2.3.2</a></li>
                       <li><a href="#">Sublink 2.3.3</a></li>
                       <li><a href="#">Sublink 2.3.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 2.4.1</a></li>
                       <li><a href="#">Sublink 2.4.2</a></li>
                       <li><a href="#">Sublink 2.4.3</a></li>
                       <li><a href="#">Sublink 2.4.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 2.5.1</a></li>
                       <li><a href="#">Sublink 2.5.2</a></li>
                       <li><a href="#">Sublink 2.5.3</a></li>
                       <li><a href="#">Sublink 2.5.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 2.6.1</a></li>
                       <li><a href="#">Sublink 2.6.2</a></li>
                       <li><a href="#">Sublink 2.6.3</a></li>
                       <li><a href="#">Sublink 2.6.4</a></li>
                   </ul>
              </li>
         </ul>
    </li>
    <li><a href="#">Toplink 3</a>
         <ul>
              <li>
                   <ul>
                       <li><a href="#">Sublink 3.1.1</a></li>
                       <li><a href="#">Sublink 3.1.2</a></li>
                       <li><a href="#">Sublink 3.1.3</a></li>
                       <li><a href="#">Sublink 3.1.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 3.2.1</a></li>
                       <li><a href="#">Sublink 3.2.2</a></li>
                       <li><a href="#">Sublink 3.2.3</a></li>
                       <li><a href="#">Sublink 3.2.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 3.3.1</a></li>
                       <li><a href="#">Sublink 3.3.2</a></li>
                       <li><a href="#">Sublink 3.3.3</a></li>
                       <li><a href="#">Sublink 3.3.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 3.4.1</a></li>
                       <li><a href="#">Sublink 3.4.2</a></li>
                       <li><a href="#">Sublink 3.4.3</a></li>
                       <li><a href="#">Sublink 3.4.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 3.5.1</a></li>
                       <li><a href="#">Sublink 3.5.2</a></li>
                       <li><a href="#">Sublink 3.5.3</a></li>
                       <li><a href="#">Sublink 3.5.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 3.6.1</a></li>
                       <li><a href="#">Sublink 3.6.2</a></li>
                       <li><a href="#">Sublink 3.6.3</a></li>
                       <li><a href="#">Sublink 3.6.4</a></li>
                   </ul>
              </li>
         </ul>
    </li>
    <li><a href="#">Toplink 4</a>
         <ul>
              <li>
                   <ul>
                       <li><a href="#">Sublink 4.1.1</a></li>
                       <li><a href="#">Sublink 4.1.2</a></li>
                       <li><a href="#">Sublink 4.1.3</a></li>
                       <li><a href="#">Sublink 4.1.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 4.2.1</a></li>
                       <li><a href="#">Sublink 4.2.2</a></li>
                       <li><a href="#">Sublink 4.2.3</a></li>
                       <li><a href="#">Sublink 4.2.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 4.3.1</a></li>
                       <li><a href="#">Sublink 4.3.2</a></li>
                       <li><a href="#">Sublink 4.3.3</a></li>
                       <li><a href="#">Sublink 4.3.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 4.4.1</a></li>
                       <li><a href="#">Sublink 4.4.2</a></li>
                       <li><a href="#">Sublink 4.4.3</a></li>
                       <li><a href="#">Sublink 4.4.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 4.5.1</a></li>
                       <li><a href="#">Sublink 4.5.2</a></li>
                       <li><a href="#">Sublink 4.5.3</a></li>
                       <li><a href="#">Sublink 4.5.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 4.6.1</a></li>
                       <li><a href="#">Sublink 4.6.2</a></li>
                       <li><a href="#">Sublink 4.6.3</a></li>
                       <li><a href="#">Sublink 4.6.4</a></li>
                   </ul>
              </li>
         </ul>
    </li>
    <li><a href="#">Toplink 5</a>
         <ul>
              <li>
                   <ul>
                       <li><a href="#">Sublink 5.1.1</a></li>
                       <li><a href="#">Sublink 5.1.2</a></li>
                       <li><a href="#">Sublink 5.1.3</a></li>
                       <li><a href="#">Sublink 5.1.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 5.2.1</a></li>
                       <li><a href="#">Sublink 5.2.2</a></li>
                       <li><a href="#">Sublink 5.2.3</a></li>
                       <li><a href="#">Sublink 5.2.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 5.3.1</a></li>
                       <li><a href="#">Sublink 5.3.2</a></li>
                       <li><a href="#">Sublink 5.3.3</a></li>
                       <li><a href="#">Sublink 5.3.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 5.4.1</a></li>
                       <li><a href="#">Sublink 5.4.2</a></li>
                       <li><a href="#">Sublink 5.4.3</a></li>
                       <li><a href="#">Sublink 5.4.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 5.5.1</a></li>
                       <li><a href="#">Sublink 5.5.2</a></li>
                       <li><a href="#">Sublink 5.5.3</a></li>
                       <li><a href="#">Sublink 5.5.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 5.6.1</a></li>
                       <li><a href="#">Sublink 5.6.2</a></li>
                       <li><a href="#">Sublink 5.6.3</a></li>
                       <li><a href="#">Sublink 5.6.4</a></li>
                   </ul>
              </li>
         </ul>
    </li>
    <li><a href="#">Toplink 6</a>
         <ul>
              <li>
                   <ul>
                       <li><a href="#">Sublink 6.1.1</a></li>
                       <li><a href="#">Sublink 6.1.2</a></li>
                       <li><a href="#">Sublink 6.1.3</a></li>
                       <li><a href="#">Sublink 6.1.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 6.2.1</a></li>
                       <li><a href="#">Sublink 6.2.2</a></li>
                       <li><a href="#">Sublink 6.2.3</a></li>
                       <li><a href="#">Sublink 6.2.4</a></li>
                   <ul>
                       <li><a href="#">Sublink 6.3.1</a></li>
                       <li><a href="#">Sublink 6.3.2</a></li>
                       <li><a href="#">Sublink 6.3.3</a></li>
                       <li><a href="#">Sublink 6.3.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 6.4.1</a></li>
                       <li><a href="#">Sublink 6.4.2</a></li>
                       <li><a href="#">Sublink 6.4.3</a></li>
                       <li><a href="#">Sublink 6.4.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 6.5.1</a></li>
                       <li><a href="#">Sublink 6.5.2</a></li>
                       <li><a href="#">Sublink 6.5.3</a></li>
                       <li><a href="#">Sublink 6.5.4</a></li>
                   </ul>
                   <ul>
                       <li><a href="#">Sublink 6.6.1</a></li>
                       <li><a href="#">Sublink 6.6.2</a></li>
                       <li><a href="#">Sublink 6.6.3</a></li>
                       <li><a href="#">Sublink 6.6.4</a></li>
                   </ul>
              </li>
         </ul>
    </li>
</ul>

</body>
</html>