✔ Menü: 2. Ebene kann nicht als Block dargestellt werden

Status
Nicht offen für weitere Antworten.
M

mruiss

Grünschnabel
Hallo liebes "letzte Hilfe" Forum,

ich bastele jetzt schon einige Zeit an einem vertikalen Menü mit zwei ebenen, welches jedoch nach rechts aufklappen sol. Soweit so gut. Das habe ich nach langem versuchen hinbekommen.

Das einzige woran ich verzweifele ist, daß ich es nicht hinbekomme, daß die 2. Ebene der Liste (ul, ul) als block dargestellt wird.

Ich hoffe, daß mir einer von Euch Profis kurz helfen kann.

Das ganze steh in einem div class="menu"

Code: 
.menu {
	text-align: left; 
	float: left;
	width: 200px;
	height: auto;
	margin-top: 0px;
	font:bold 12px verdana, sans-serif;
}

.menu ul {
	background:#fff;
	border-bottom:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #666;
	list-style:none;
	padding-left:0px;
	list-style-position:outside;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

.menu li {
position:relative;
}

.menu a, .menu a:visited {
	color:#666;
	display:block;
	text-decoration:none;
	font-variant:small-caps;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 5px;
	height:25px;
	line-height:25px;
}

.menu :hover > a {
	background:#860011;
	color:#fff;
}

.menu ul ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:168px;
}

.menu ul li:hover ul,  .menu ul a:hover ul {
	visibility:visible;

Herzlichen Dank vorab für eine schnelle Hilfe...

Matthias
 
Also:

Das Menü funktioniert einwandfrei. Der Hover funktioniert auch problemlos.

Das einzige was nicht funktioniert ist, daß die Links der Menüpunkte über die ganze Fläche des Feldes verlinkt sind. Sprich. Der Hover-Effekt geht im ganzen Feld, der Link allerdings nicht. Der geht nur direkt auf dem Text...

Das ist sowohl in der erste als auch in der zweiten Ebene der Fall...

Jemand eine Idee?

Hier nochmals ein etwas veränderter Code:

Code: 
.menu {
	text-align: left; 
	float: left;
	width: 200px;
	height: auto;
	margin-top: 0px;
	font:bold 12px verdana, sans-serif;
}

.menu ul {
	background:#fff;
	border-bottom:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #666;
	list-style:none;
	padding-left:0px;
	list-style-position:outside;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

.menu li {
position:relative;
}

.menu a, .menu a:visited {
	color:#666;
	display:block;
	text-decoration:none;
	font-variant:small-caps;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 5px;
}

.menu :hover > a {
	background:#860011;
	color:#fff;
}

.menu ul ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:168px;
	}

.menu ul li:hover ul,  .menu ul a:hover ul {
	visibility:visible;
 
Hier mal der ganze Code:

Ich hab ihn eben mal auf einen Testserver geladen und es ist leider nicht die ganze (rote) Fläche verlinkt... sondern eben nur der entsprechende Text verlinkt auf die entsprechende Seite....

Kannst Du nochmal schauen? :-(

Vielen Dank

CSS:
Code: 
.menu {
	text-align: left; 
	float: left;
	width: 200px;
	height: auto;
	margin-top: 0px;
	font:bold 12px verdana, sans-serif;
}

.menu ul {
	background:#fff;
	border-bottom:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #666;
	list-style:none;
	padding-left:0px;
	list-style-position:outside;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

.menu li {
position:relative;
}

.menu a, .menu a:visited {
	color:#666;
	display:block;
	text-decoration:none;
	font-variant:small-caps;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 5px;
}

.menu :hover > a {
	background:#860011;
	color:#fff;
}

.menu ul ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:168px;
	}

.menu ul li:hover ul,  .menu ul a:hover ul {
	visibility:visible;

HTML:
Code: 
<body>

<div class="menu">
    <ul style="margin-top": 0>
      <li><a href="index.html">Start</a></li>
      <li><a href="Konzept.html">TOP Konzept</a></li>
      <li><a href="aktuell.html">TOP Inhalt</a></li>
      	<ul>
            <li><a href="Events.html">Events</a></li>
            <li><a href="Business.html">Business</a></li>
            <li><a href="Lifestyle.html">Lifestyle</a></li>
            <li><a href="Travel.html">Travel</a></li>
            <li><a href="Health.html">Health & Beauty</a></li>
            <li><a href="Gourmet.html">Gourmet</a></li>
            <li><a href="Arts.html">Art</a></li>
        </ul>
      <li><a href="Media.html">Mediadaten</a></li>
        <ul>
            <li><a href="Preise.html">Preise</a></li>
            <li><a href="Technik.html">Technische Angaben</a></li>
            <li><a href="Vertrieb.html">Vertriebsgebiet</a></li>
            <li><a href="Anzeige.html">Anzeige buchen</a></li>
        </ul>
      <li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
      <li><a href="Ansprechpartner.html">Ansprechpartner</a></li>
      <li><a href="agb.html">agb</a></li>
    </ul>
  </div>

</body>

Achso:

Hier mal der Link zum Testserver...

Vielleicht seht Ihr hier was ich meine...

TESTSERVER

Gruß
Matthias
 
Es hat sich bei mir nichts geändert.

Dafür wird aber das Submenü nicht angezeigt, da du die verschachtelte Liste falsch konstruiert hast:

Code: 
<div class="menu">
    <ul style="margin-top": 0>
      <li><a href="index.html">Start</a></li>
      <li><a href="Konzept.html">TOP Konzept</a></li>
      <li><a href="aktuell.html">TOP Inhalt</a><!--</li>-->
              <ul>
            <li><a href="Events.html">Events</a></li>
            <li><a href="Business.html">Business</a></li>
            <li><a href="Lifestyle.html">Lifestyle</a></li>
            <li><a href="Travel.html">Travel</a></li>
            <li><a href="Health.html">Health & Beauty</a></li>
            <li><a href="Gourmet.html">Gourmet</a></li>
            <li><a href="Arts.html">Art</a></li>
        </ul>
      </li>
      <li><a href="Media.html">Mediadaten</a><!--</li>-->
        <ul>
            <li><a href="Preise.html">Preise</a></li>
            <li><a href="Technik.html">Technische Angaben</a></li>
            <li><a href="Vertrieb.html">Vertriebsgebiet</a></li>
            <li><a href="Anzeige.html">Anzeige buchen</a></li>
        </ul>
      </li>
      <li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
      <li><a href="Ansprechpartner.html">Ansprechpartner</a></li>
      <li><a href="agb.html">agb</a></li>
    </ul>
</div>

Zudem hast du hier den Wert außerhalb der Eigenschaft gesetzt:
Code: 
<ul style="margin-top": 0>
 
Ich glaube ich weiß, warum es bei Dir geht und bei mir nicht...

Du benutzt Mozilla und ich "Asche auf mein Haupt" IE7...

Stimmts.

Vielleicht hast Du noch eine Idee zu 2 Problemen

1. Warum geht das im IE 7 nicht

und 2.

2. Wie bekomme ich die Blockgröße in den ausklappenden Untermenüs so hin, daß sie genauso groß ist wie die Root Ebene... Ich gehe mal davon aus, daß die ul ul bei Dir auch kleiner als die 1. Ebene ist !?


Testserver ist aktualisier...


Danke für Deine Mühe

Matthias
 
Code: 
.menu ul ul {
        visibility:hidden;
        position:absolute;
        top:0;
        left:168px;
        width:168px;
}
Und nach dem "normalen" Stylesheet implementierst du folgenden "Conditional Comment" für den IE:

Code: 
<style type="text/css">
...
</style>
<!--[if lte IE 7]>
<style type="text/css">
.menu ul li a { width:166px; }
.menu ul li ul li a { width:155px; }
</style>
<![endif]-->
 
Großartig

Das löst zumindest das Problem mit der Breite.

hast Du auch noch eine Idee, daß der gesamte Block und nicht nur der Text im IE7 verlinkt wird.

So wie eben auch im Mozilla...

Gruß
Matthias
 
Hi,

weise doch dem Link direkt die Eigenschaft display:block zu und definiere Breite und Höhe dort. Dann dürftest Du auch keine Probleme mit den Größenunterschieden im IE/FF haben.

Gruß tyg3r
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück