Baloo
Hallo Zusammen,
ich habe folgende Frage an euch. Meine Menüstruktur war bis dato wie folgt:
Home Über uns Impressum Kontakt
Nun brauche ich unter Impressum unterpunkte:
In der HTML (Index.html)
<nav id="mainNavigation">
<ul class="wrapper">
<li"><a href="#">Home</a></li>
<li"><a href="#">Über uns</a></li>
<li"><a href="#" title="">Impressum</a>
<ul>
<li class="submenu"><a href="#" title="">...</a></li>
<li class="submenu"><a href="#" title="">...</a></li>
<li class="submenu"><a href="#" title="">...</a></li>
</ul>
</li>
<li"><a href="#" title="">Kontakt</a> </li>
</nav>
In der CSS habe ich folgendes:
.wrapper{ width:998px; margin:auto; }
#maincontent article h2,
#maincontent article h3,
footer .footerCol h5{ font-family: 'Lato', sans-serif }
header{ width:auto; height:150px; background:url(img/header.jpg) no-repeat center top #fe6301; clear:both; }
header #branding,
header #branding a{ width:480px; height:125px; margin:0; padding: 20px 0 0 0; float:left; }
header #branding a { padding:0; float:none; background:url(img/logo.png) no-repeat; display:block; text-indent:-9999em; }
header #topNavigation li { display: inline; padding:0 5px; }
header #topNavigation li a { color:#807f7f; }
header #topNavigation li a:hover { color:#333; }
#mainNavigation { background:#3399cc; width:auto; padding:8px 0 10px 0; text-transform:uppercase; margin-bottom:34px; font-size:1.3em; }
#mainNavigation li { display:inline; padding:0 15px; }
#mainNavigation li:first-child { padding-left:0; }
#mainNavigation li:last-child{ color:#ff0000; }
#mainNavigation li a { color:#FFF; }
#mainNavigation li a:hover{ color:#03F; }
#mainNavigation li ul { display:none; }
#mainNavigation li:hover ul,
#mainNavigation ul li { display:block; }
#mainNavigation li ul li a { color: #FFFFFF; display: block; }
#mainNavigation li ul li a:hover { color: #003399; }
Wie bitte muss ich die CSS anpassen, um das Menü wie oben korrekt darstellen zu können?
Vielen Dank im voraus
Gruß Jörg
ich habe folgende Frage an euch. Meine Menüstruktur war bis dato wie folgt:
Home Über uns Impressum Kontakt
Nun brauche ich unter Impressum unterpunkte:
In der HTML (Index.html)
<nav id="mainNavigation">
<ul class="wrapper">
<li"><a href="#">Home</a></li>
<li"><a href="#">Über uns</a></li>
<li"><a href="#" title="">Impressum</a>
<ul>
<li class="submenu"><a href="#" title="">...</a></li>
<li class="submenu"><a href="#" title="">...</a></li>
<li class="submenu"><a href="#" title="">...</a></li>
</ul>
</li>
<li"><a href="#" title="">Kontakt</a> </li>
</nav>
In der CSS habe ich folgendes:
.wrapper{ width:998px; margin:auto; }
#maincontent article h2,
#maincontent article h3,
footer .footerCol h5{ font-family: 'Lato', sans-serif }
header{ width:auto; height:150px; background:url(img/header.jpg) no-repeat center top #fe6301; clear:both; }
header #branding,
header #branding a{ width:480px; height:125px; margin:0; padding: 20px 0 0 0; float:left; }
header #branding a { padding:0; float:none; background:url(img/logo.png) no-repeat; display:block; text-indent:-9999em; }
header #topNavigation li { display: inline; padding:0 5px; }
header #topNavigation li a { color:#807f7f; }
header #topNavigation li a:hover { color:#333; }
#mainNavigation { background:#3399cc; width:auto; padding:8px 0 10px 0; text-transform:uppercase; margin-bottom:34px; font-size:1.3em; }
#mainNavigation li { display:inline; padding:0 15px; }
#mainNavigation li:first-child { padding-left:0; }
#mainNavigation li:last-child{ color:#ff0000; }
#mainNavigation li a { color:#FFF; }
#mainNavigation li a:hover{ color:#03F; }
#mainNavigation li ul { display:none; }
#mainNavigation li:hover ul,
#mainNavigation ul li { display:block; }
#mainNavigation li ul li a { color: #FFFFFF; display: block; }
#mainNavigation li ul li a:hover { color: #003399; }
Wie bitte muss ich die CSS anpassen, um das Menü wie oben korrekt darstellen zu können?
Vielen Dank im voraus
Gruß Jörg
