Frage CSS Alternative zu min-width: 150px; beim menu ausklappen

[Blaster]

Hallo zusammen!

Ich habe ein Menu das mit zwei CSS Klassen beschrieben werden.
Wenn ich die Maus über den Bar führe, entsteht ein Abstand, je nach dem wie breit die Submenus sind.
Die Hintergrund Farberweiterung kann ich aber nur explizit mit automatisch
min-width: 150px; festlegen.
Ich will die Ausdehnung aber so gestalten, dass gemäß der Breite der Submenus automatisch top und sub menu ein schönes Rechteck bilden ohne das ich diese festlegen muss.
min- width: 100%;; funktioniert leider nicht.
ich muss irgendein min-width : inherit; aus dem submenu hinbekommen.;
Oder was aus width machen zu hinbekommen.

Fällt Euch dazu was ein, wie man das lösen kann?

 .topmenu a, .submenu a{
 
        border: none;
        display: block;
        text-decoration:none;
        color: blue;
        font-size: 14px;
        font-weight: bold;
        float: left; 
        padding: 2px 5px;
    }
 
    .topmenu a:hover, .submenu a:hover{
        min-width: 150px;
    }

    .submenu a{
        font-size:12px;
        text-align: left;
        text-vertical-align: center;
        min-width: 150px;
        min-height: 40px;
        position: left-side;

        clear:both; /* special IE6 */
    }

 

[Oliver77]

Was genau willst du erreichen, ich würde https://codepen.io/ empfehlen, um zu zeigen worum es geht...

 

[SpiceLab]

clear:both; /* special IE6 */

Diese Zeile ist ein Relikt, als IE6 den aktuellen MS-Browser repräsentierte (IE6-Release ~August 2001, IE7-Release ~Oktober 2006), und war seinerzeit in der Developer-Community als sogenannter "Clearfix-Hack" bekannt, weil IE6 die float-Eigenschaft nicht gemäß dem W3C-Standard (W3C = WorldWideWebConsortium) interpretierte, und bei jeglichen float-Anwendungsfällen für inflationäre Threads in den einschlägig bekannten Foren sorgte.

Ich kann >20 Jahre später echt nicht mehr rekapitulieren, wie oft ich in meinem damaligen Stamm-Forum hierzu in allen möglichen denkbaren (Layout-)Facetten Lösungsvorschläge (in Form von "CSS-Hacks") posten durfte...

...gefühlt durchschnittlich mind. 2-3 mal pro Woche.

Irgendwann habe ich dort (in Funktion & Berechtigung eines Moderators) aus Bequemlichkeit kurzerhand ein allumfassendes FAQs-Tutorial publiziert, um zukünftig nur noch mit einem Einzeiler darauf verweisen zu können.

Lange Rede, kurzer Sinn...

Dein gezeigter CSS-Code ist nicht mehr zeitgemäß; kein Webentwickler berücksichtigt heute noch den IE6!

Wer weiß, wo Du nichtwissend diesen überholten, veralteten Code-Snippet im Web herausgefischt hast, und uns hier nun hilflos präsentierst?!

Meine Empfehlung: Setze Dich bitte "alternativ" -um sprichwörtlich auf Deinen formulierten Topic Bezug zu nehmen- mit den aktuellen CSS-Techniken auseinander, wie z.B. Flexbox anstelle der float-Eigenschaft, und Du wirst Deine Wunschvorstellung umgesetzt bekommen.

PS:

Die Hintergrund Farberweiterung kann ich aber nur explizit mit automatisch
min-width: 150px; festlegen.

Eine background- oder background-color-Regel ist aber in dem CSS überhaupt nicht zu entdecken!

Okay, geschenkt. Das ist wohl nur als theoretische/plastische Aussage zu verstehen.

text-vertical-align: center;

position: left-side;

Davon habe ich noch nie etwas gehört/gelesen!

1. https://www.w3schools.com/cssref/pr_text_text-align.php
2. https://www.w3schools.com/cssref/pr_pos_vertical-align.php
3. https://www.w3schools.com/css/css_positioning.asp

 

[Blaster]

Wer weiß, wo Du nichtwissend diesen überholten, veralteten Code-Snippet im Web herausgefischt hast, und uns hier nun hilflos präsentierst?!

Meine Empfehlung: Setze Dich bitte "alternativ" -um sprichwörtlich auf Deinen formulierten Topic Bezug zu nehmen- mit den aktuellen CSS-Techniken auseinander, wie z.B. Flexbox anstelle der float-Eigenschaft, und Du wirst Deine Wunschvorstellung umgesetzt bekommen.


Davon habe ich noch nie etwas gehört/gelesen!

1. https://www.w3schools.com/cssref/pr_text_text-align.php
2. https://www.w3schools.com/cssref/pr_pos_vertical-align.php
3. https://www.w3schools.com/css/css_positioning.asp

Also um das klar zu stellen, ich bin nur Webdesigner aus Notwehr, weil kein anderer es machen kann. Ich habe seit 2004 professional kein Webcode ((x)html, XML, CSS, JS, PHP; Perl, ASP, Java, C# etc) mehr geschrieben. Ab 2005 war ich bereits leitender Prozessmanager über ca. 1000 SW-Entwickler u.v.. - Und jetzt kann ich natürlich alles und nichts im Nahkampf.

Das mit Flexbox und die Links werde ich mir anschauen, wenn dies Alternativen sein sollen. Das CSS wurde von mir bewusst gekürzt.

Was genau willst du erreichen, ich würde https://codepen.io/ empfehlen, um zu zeigen worum es geht...

Danke für den Tipp.

 

[SpiceLab]

Autsch...

Entschuldige bitte, wenn mein kritischer Kommentar "herzlos" / "kalt" / "arrogant" 'rübergekommen ist - ich habe lediglich meine Verwunderung ob des überholten CSS-Codes zum Ausdruck bringen wollen...

... ~shame on me~

Nach dem Lesen der "Hintergründe" relativiere ich selbstverständlich meine Aussage, und wünsche ich Dir aufrecht von ganzem Herzen viel Erfolg, das Projekt gestemmt zu bekommen!

Ich bin mir auch sicher, dass wir Dir praktisch unter die Arme greifen können, wenn Du Dich mit zeitgemäßem CSS an uns wendest