Hallo,
Ich habe gerade versucht eine Sprachauswahl für meine Seite zu erstellen. Da ich die Flaggen nicht direkt in den Footer integrieren wollte, weil ich das hässlich finde, habe ich ein aufklappbares menü erstellt. Soweit so gut ;)
Jetzt weiß ich nicht, wie ich das einstelle, dass sich das menü nach oben aufklappt und dass der Hauptpunkt im hover Zustand bleibt wenn ich über das aufgeklppte menü fahre. Ich hoffe ihr wisst was ich meine :)
Im voraus Danke
bennie11
PS.: hier meine Fortschritte:
Ich habe gerade versucht eine Sprachauswahl für meine Seite zu erstellen. Da ich die Flaggen nicht direkt in den Footer integrieren wollte, weil ich das hässlich finde, habe ich ein aufklappbares menü erstellt. Soweit so gut ;)
Jetzt weiß ich nicht, wie ich das einstelle, dass sich das menü nach oben aufklappt und dass der Hauptpunkt im hover Zustand bleibt wenn ich über das aufgeklppte menü fahre. Ich hoffe ihr wisst was ich meine :)
Im voraus Danke
bennie11
PS.: hier meine Fortschritte:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Menüleiste--*/
#menu {
width: 898px;
border-spacing:2px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 15px;
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
background-color: #efefef;
margin:auto;
display: table;
border-collapse:separate;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #1782D0;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: auto;
padding-left:10px;
padding-right:10px;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
padding:10px;
color: #222222;
background: #efefef;
width:100%;
}
#menu h3:hover {
color: #222222;
background: #ffffff;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a, #menu span {
text-decoration: none;
display: block;
text-align: left;
padding:5px;
padding-left:20px;
padding-right:23px;
vertical-align:top;
padding-top:12px;
background: #ffffff;
color: #222222;
width: 100%;
margin-left:-10px;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover, #menu span {
color: #ffffff;
background: #222222;
}
#menu a.ohne-untermenue {
margin-left:0px;
float: left;
width: auto;
list-style-type: none;
font-size: 1em;
text-align: center;
padding:10px;
color: #222222;
background: #efefef;
width:100%;
font-weight:bold;
}
#menu a.ohne-untermenue:hover {
color: #222222;
background: #ffffff;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="menu"><!-- öffnet die Navigationsleiste-->
<ul><!-- öffnet den ersten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 1 -->
<h3>Language Selection</h3>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li><a href="#"><img src="../Documents/wolkov/germany.png" width="25" /> German</a></li>
<li><a href="#"><img src="../Documents/wolkov/russia.png" width="25" /> Russian</a></li>
<li><a href="#"><img src="../Documents/wolkov/united_kingdom.png" width="25" /> English</a></li>
</ul><!-- schließt die Klappnavi von Thema 1 -->
</li><!-- schließt die Listeneinträge von Thema 1 -->
</ul><!--schließt den ersten Themenblock-->
<ul>
<li>
<a href="#beispiel" class="ohne-untermenue">Impressum</a>
</li>
</ul>
</div><!-- schließt die Menüleiste #menu -->
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
</body>
</html>