Moin Alle,
erstmal, Ich bin einen Kaugummitechniker und meinen Deutsch ist nicht d. beste.
Hintergrund:
Ich bauen einen Website indem keinen JAVA verwendet werde.
Statdesen, habe Ich CSS stark benutzt.
Nächste Aufgabe, einen pop-up für grafiks zu erstellen. Pop-up soll erscheinen in ein andere Stelle bei Mouse-over an einen Text.
Ist Situation:
Ich habe hier einen gute CSS Script gesehen, geändert und verwendet um einen "bewegliche" Nav-Leiste z realizieren. Funktioniert gut.
/* CSS Script für Nav*/
/* ============== */
div#Rahmen {width: 1020px; height: 20px; padding: 0px; border: 0px solid #5B5B5B; background-color: #CCFF66; }
* html div#Rahmen { /* Corrections for IE 5.x */ width: 1020px; w\idth: 1020px; }
div#Rahmen div { clear: center; }
ul#Navigation { margin: 0; padding: 0; text-align: center; }
ul#Navigation li { list-style: none; float: left; width: 204px; position: relative; margin: 0px; padding: 0px; }
* html ul#Navigation li { /* Corrections for IE 5 and 6 */ margin-bottom: -5px; }
*:first-child+html ul#Navigation li { /* Corrections for IE 7 */ margin-bottom: 0px; }
ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1px; left: 1px; }
* html ul#Navigation li ul { /* Corrections for IE 5.x */ left: 1px; lef\t: 1px; }
ul#Navigation li ul li { float: none; display: block; margin-bottom: 1px; }
ul#Navigation a, ul#Navigation span { display: block; padding: 1px 1px; text-decoration: none; font-weight: bold; border: 1px solid #5B5B5B; border-left-color: #BBBBBB; border-top-color: #BBBBBB; color: black; background-color: #CCFF66; }
* html ul#Navigation a, * html ul#Navigation span { /* Nesseccary only for IE */ width: 100%; w\idth: 6em; }
ul#Navigation a:hover, ul#Navigation span, li a#aktuell { border-color: #BBBBBB; border-left-color: #5B5B5B; border-top-color: #5B5B5B; color: #E7002A; background-color: #CCFF66; }
li a#aktuell { /* aktuelle Rubrik kennzeichnen */ color: #E7002A; background-color: #CCFF66; }
ul#Navigation li ul span { /* Actual 2nd level highlights */ background-color: #E7002A; }
ul#Navigation li>ul { display: none; top: 1.8em; }
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul { display: block; }
Workaround for IE 7
*:first-child+html ul#Navigation ul { background-color:clear; padding-bottom:0px; }
/* HTML script */
/* =========== */
<div id="Rahmen" align="center">
<ul id="Navigation">
<li>
<a href="#.html">page1</a>
</li>
<ul>
<li><a href="#.html">page2</a></li>
<li><a href="#.html">page3</a></li>
</ul>
<li><a href="#.html">page4</a></li>
<li><a href="#.html">page5</a></li>
<li><a href="#.html">page6</a>
<ul>
<li><a href="#.html">page7</a></li>
<li><a href="#.html">üage8</a></li>
</ul>
</li>
<li><a href="#.html">page9</a></li>
<ul><li><a href="#.html">page10</a></li></ul></ul><div></div></div>
In diese Script spurre ich d. Antwort. Ich vermüte das es in diese Zeilen legt.
/* Vermütung */
/* ========= */
ul#Navigation li ul span { /* Actual 2nd level highlights */ background-color: #E7002A; }
ul#Navigation li>ul { display: none; top: 1.8em; }
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul { display: block; }
Ich werde mich freuen für einen "solution".