H
Hannibal08
Guest
Dropdownmenü im div Container deklarieren?
Hallo,
ich habe eine Frage und zwar müssen Menüklassen innerhalb eines div Containers deklariert werden? Ich stelle den Code unten rein? Ich will ein Dropdownmenü auf der linken Seite der Homepage realisieren.
HTML Code:
<div id="links">
<h2>Navigation</h2>
<ul class="cssmenu">
<li><a href="index.html">Start</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a>
<ul>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a>
<li><a href="">""</a>
<li><a href="">""</a>
<li><a href="">""</a>
</li>
</ul>
<li><a href="">""</a>
<ul>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
</ul>
</li>
<li><a href="">""</a>
<ul>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
</ul>
</li>
</ul>
</div>
CSS Code:
ul.cssmenu {
position: relative;
display: block;
margin: 20px;
padding: 20px;
}
ul.cssmenu ul {
position: relative;
display: none;
}
ul.cssmenu li {
position: relative;
display: inline;
float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 20px;
}
ul.cssmenu li:hover > a {
background-color: #666666;
color: #FFFFFF;
font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
top: 0px;
left: 110px;
}
ul.cssmenu li li a {
width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
color: #000000;
background-color: #e4e4e4;
}
ul.cssmenu ul a {
background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
background-color: #b4b4b4;
}
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
_text-indent: 10px;
}
ul.cssmenu ul {
_display: inline;
_margin-left: 0px;
_text-indent: 20px;
}
ul.cssmenu ul ul {
_text-indent: 30px;
}
ul.cssmenu ul ul ul {
_text-indent: 40px;
}
ul.cssmenu li {
_float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
_text-align: left;
_width: 150px;
}
ul.cssmenu a:hover {
_font-weight: bold;
_background-color: #666666;
}
MFG
Hannibal08
Hallo,
ich habe eine Frage und zwar müssen Menüklassen innerhalb eines div Containers deklariert werden? Ich stelle den Code unten rein? Ich will ein Dropdownmenü auf der linken Seite der Homepage realisieren.
HTML Code:
<div id="links">
<h2>Navigation</h2>
<ul class="cssmenu">
<li><a href="index.html">Start</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a>
<ul>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a>
<li><a href="">""</a>
<li><a href="">""</a>
<li><a href="">""</a>
</li>
</ul>
<li><a href="">""</a>
<ul>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
</ul>
</li>
<li><a href="">""</a>
<ul>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
<li><a href="">""</a></li>
</ul>
</li>
</ul>
</div>
CSS Code:
ul.cssmenu {
position: relative;
display: block;
margin: 20px;
padding: 20px;
}
ul.cssmenu ul {
position: relative;
display: none;
}
ul.cssmenu li {
position: relative;
display: inline;
float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 20px;
}
ul.cssmenu li:hover > a {
background-color: #666666;
color: #FFFFFF;
font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
top: 0px;
left: 110px;
}
ul.cssmenu li li a {
width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
color: #000000;
background-color: #e4e4e4;
}
ul.cssmenu ul a {
background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
background-color: #b4b4b4;
}
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
_text-indent: 10px;
}
ul.cssmenu ul {
_display: inline;
_margin-left: 0px;
_text-indent: 20px;
}
ul.cssmenu ul ul {
_text-indent: 30px;
}
ul.cssmenu ul ul ul {
_text-indent: 40px;
}
ul.cssmenu li {
_float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
_text-align: left;
_width: 150px;
}
ul.cssmenu a:hover {
_font-weight: bold;
_background-color: #666666;
}
MFG
Hannibal08
Zuletzt bearbeitet von einem Moderator: