Hallo,
derzeit bin ich dabei, ein Menü für meine Homepage zu erstellen, ich kenne mich leider noch nicht so gut mit CSS aus. Am besten sollte diese vertikal aufklappbar sein, sodass Seite 1.1, Seite 1.2, usw. nur angezeigt werden, wenn man auf Rubrik 1 klickt. Allerdings weiß ich nicht, wie ich dies am besten umsetzen kann und die Informationen im Internet darüber haben mir auch nur wenig weitergeholfen, da ich noch nicht so viel CSS-Kenntnisse habe. Ich würde mich freuen, wenn ihr mir bitte weiterhelfen könntet. Vielen Dank.
Viele Grüße
Lisa
derzeit bin ich dabei, ein Menü für meine Homepage zu erstellen, ich kenne mich leider noch nicht so gut mit CSS aus. Am besten sollte diese vertikal aufklappbar sein, sodass Seite 1.1, Seite 1.2, usw. nur angezeigt werden, wenn man auf Rubrik 1 klickt. Allerdings weiß ich nicht, wie ich dies am besten umsetzen kann und die Informationen im Internet darüber haben mir auch nur wenig weitergeholfen, da ich noch nicht so viel CSS-Kenntnisse habe. Ich würde mich freuen, wenn ihr mir bitte weiterhelfen könntet. Vielen Dank.
Viele Grüße
Lisa
HTML:
<div id="sitemap">
<ul>
<li><a class="home" href="#" title="zur Startseite">Home</a>
<ul>
<li><a class="rubrik" href="#">Rubrik 1</a>
<ul>
<li><a href="#">Seite 1.1</a></li>
<li><a href="#">Seite 1.2</a></li>
</ul>
</li>
<li><a class="rubrik" href="#">Rubrik 2</a>
<ul>
<li><a href="#">Seite 2.1</a></li>
<li><a href="#">Seite 2.2</a></li>
</ul>
</li>
</li>
</ul>
</div>
Code:
#sitemap {
width: 200px;
margin: 0 0 0 0;
}
#sitemap ul {
list-style-type: none;
}
#sitemap ul li a {
display: block;
text-decoration: none;
}
#sitemap ul li a {
padding: 5px 0 5px 40px;
}
#sitemap ul ul li a {
padding-left: 40px;
}
#sitemap ul ul ul li a {
padding-left: 60px;
}
#sitemap ul li a.home {
padding-left: 20px;
}
#sitemap ul li a.rubrik {
padding-left: 40px;
}
#sitemap ul ul li a.rubrik {
padding-left: 40px;
}
#sitemap ul li a:hover,
#sitemap ul li a:hover.home,
#sitemap ul li a:hover.rubrik {
border: 1px solid #d4d4d4;
}
/* IE Zusatz*/
* html #sitemap ul li {
display: inline;
}
* html #sitemap ul li a {
height: 1%;
}
/* IE Zusatz Ende */
