CSS Menü: Größe der Untermenüs ändern
Verfasst: 15.03.2007 20:11
Hallo Leute,
Habe von hier ein Menu, welches ich bei mir lokal verwende.
Nun möchte ich es gerne so einstellen, dass die aufklappenden Menüpunkte breiter sind als die Hauptmenüpunkte, sodass ich in den Untermenüpunkten längere Titel benutzen kann, ohne dass die Untermenüpunkte z.T. zweizeilig sind.
Hier mein derzeitiger Code (mit einem Teil der Menüpunkte):
Wenn ich zB. bei die Pixel erhöhe, dann wird zwar das Wort nicht mehr so bald umgebrochen, jedoch ist der Text nur soweit sichtbar, wie der Hauptmenüpunkt breit ist, der Rest wird "unsichtbar"
Ist das denn überhaupt möglich?
zB bei Tabellen kann man ja auch nicht die erste Zeile kleiner als die darauffolgenden, darunterliegenden Zeilen machen - die müssen auch immer gleich groß sein. k.A. ob das bei CSS ähnlich ist.
Mit Javascript würde es gehen, aber genau das möchte ich vermeiden.
Danke für eure Ideen!
Habe von hier ein Menu, welches ich bei mir lokal verwende.
Nun möchte ich es gerne so einstellen, dass die aufklappenden Menüpunkte breiter sind als die Hauptmenüpunkte, sodass ich in den Untermenüpunkten längere Titel benutzen kann, ohne dass die Untermenüpunkte z.T. zweizeilig sind.
Hier mein derzeitiger Code (mit einem Teil der Menüpunkte):
Code: Alles auswählen
<head><style type="text/css">
#menuebox { position: relative; height: 20px; }
#menue { position: absolute; top: 5px; left: 0; padding-bottom: 2px; }
.aussen { float: left; display: block; overflow: hidden; width: 110px; height: 1.3em; font-size: 14px; font-weight: bold; text-align: center; background-color: #e9ffe9; color: #000000; border: 1px solid; border-color: #cfefcf #cfefcf #cfefcf #cfefcf; }
.aussen:hover { height: auto; background-color: #cfefcf; color: #000000; }
a.innen-1 { margin-top: 2px; }
a.innen, a.innen-1 { display: block; width: 110px; font-size: 12px; text-decoration: none; font-weight: normal; border-bottom: 1px solid #66ffcc; background-color: #fffff7; color: #000000; }
a:hover.innen, a:hover.innen-1 { background-color: #cfefcf; color: #000000; }
span.menutag { display: block; cursor: default; }
body { background: url('PC_016.jpg'); font-family: Tahoma; background-position:center; background-attachment:fixed; background-repeat:no-repeat; background-color: #02082a;}
</style></head>
<body><br />
<div id="menuebox">
<div id="menue">
<div class="aussen">
<span class="menutag">Foren</span>
<a class="innen-1" href="http://www.phpbb.de/index.php">phpBB.de</a>
<a class="innen" href="http://www.phpbb.com/phpBB/index.php">phpBB.com</a>
<a class="innen" href="http://area51.phpbb.com/phpBB/">Area51 - phpBB3</a>
<a class="innen" href="http://www.phpbb2.de/index.php">phpBB2.de</a>
<a class="innen" href="http://www.php.de/forum/forums.html">php.de</a>
</div>
<div class="aussen">
<span class="menutag">Internet</span>
<a class="innen-1" href="http://www.alexa.com/">Related Info for Domains - Alexa</a>
<a class="innen" href="http://web.archive.org/">Wayback Internet Archive</a>
<a class="innen" href="http://scoreboard.keynote.com/scoreboard/Main.aspx">Internet Health Report</a>
<a class="innen" href="http://www.dnsstuff.com/">DNS Tools</a>
</div>
</div>
</div>
...Code: Alles auswählen
a.innen, a.innen-1 { display: block; width: 110px; ...Ist das denn überhaupt möglich?
zB bei Tabellen kann man ja auch nicht die erste Zeile kleiner als die darauffolgenden, darunterliegenden Zeilen machen - die müssen auch immer gleich groß sein. k.A. ob das bei CSS ähnlich ist.
Mit Javascript würde es gehen, aber genau das möchte ich vermeiden.
Danke für eure Ideen!