hallo,
Eine frage von mir.
auf meiner momentanigen homepage habe ich kein dropdownmenü.
( www.manuelgaebert.2page.de )
ich möchte nun das die momentanige schrift der hyperlinks so bleibt und nur wenn man jetzt auf z.b. bei my family rüberfährt, die unterseiten angezeigt werden (das halt nun das drop down menü zum einsatz kommt) und dann angewählt werden können. Ich habe nur codes gefunden, die aus buttons usw. bestehen, keine einzelne schrift. ich weiß nun auch leider nicht, ob sowas geht, ich hoffe ihr versteht meine frage.
hier ein code für ein normales dropdown menü:
danke schonmal
mfg manU91
Eine frage von mir.
auf meiner momentanigen homepage habe ich kein dropdownmenü.
( www.manuelgaebert.2page.de )
ich möchte nun das die momentanige schrift der hyperlinks so bleibt und nur wenn man jetzt auf z.b. bei my family rüberfährt, die unterseiten angezeigt werden (das halt nun das drop down menü zum einsatz kommt) und dann angewählt werden können. Ich habe nur codes gefunden, die aus buttons usw. bestehen, keine einzelne schrift. ich weiß nun auch leider nicht, ob sowas geht, ich hoffe ihr versteht meine frage.
hier ein code für ein normales dropdown menü:
Code:
<html>
<div id="menuebox">
<div id="menue">
<div class="aussen">
<span class="menutag">Produkte</span>
<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>
</div>
<div class="aussen">
<span class="menutag">Leistungen</span>
<a class="innen-1" href="#">Netzwerke</a>
<a class="innen" href="#">Server</a>
<a class="innen" href="#">Wartung</a>
</div>
<div class="aussen">
<span class="menutag">Service</span>
<a class="innen-1" href="#">Reparatur</a>
<a class="innen" href="#">Konfiguration</a>
<a class="innen" href="#">Software</a>
<a class="innen" href="#">Schulung</a>
</div>
<div class="aussen">
<span class="menutag">Links</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
</div>
</div><!-- menue -->
<!-- Der folgende Block bedient nur IEs!
Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->
<!--[if IE]>
<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
<a class="inn" href="#">Systeme</a>
<a class="inn" href="#">Speicher</a>
<a class="inn" href="#">Laufwerke</a>
<a class="inn" href="#">Monitore</a>
<a class="inn" href="#">Drucker</a>
<a class="inn" href="#">Zubehör</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
<a class="inn" href="#">Netzwerke</a>
<a class="inn" href="#">Server</a>
<a class="inn" href="#">Wartung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
<a class="inn" href="#">Reparatur</a>
<a class="inn" href="#">Konfiguration</a>
<a class="inn" href="#">Software</a>
<a class="inn" href="#">Schulung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
</div><!-- stupidie -->
<![endif]-->
</div><!-- menuebox -->
</html>
++++++++++++++++++++
CSS Teil I
++++++++++++++++++++
<style type="text/css">
/*
Menue-styles fuer non-IEs
Achtung:
Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/
#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}
a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #000000;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}
++++++++++++++++++++
CSS Teil II
++++++++++++++++++++
/*
Menue-styles fuer IEs
Am besten per Conditional Comment einbinden.
Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
Anpassungen vorgenommen werden (siehe Kommentare).
*/
#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}
a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}
a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}
</style>danke schonmal
mfg manU91
