Eigene Dropdown - auf 100% des längsten Eintrags sowie Verlinkung über ganzen Länge

ich habe den nachfolgenden Quellcode nach Vorbild umgebaut: https://codepen.io/markcaron/pen/wdVmpB Jetzt würde ich gerne als letzten das Dropdown so breit machen wie der längste Eintrag und des Weiteren soll die Verlinkung auch über die komplette Breite funktionieren?

Der hier verwendete Code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> *{ margin:0; padding:0; } .dropdown,div { margin-left:40%; display:inline-block; } .dropdown > input[type="checkbox"] { display:none; } .dropdown > label, .dropdown > a[role="button"] { display:block; padding: 5px; border: 1px solid black; height:20px; } .dropdown > label:after { content: "\f0d7"; font-family: FontAwesome; display: inline; } .dropdown > ul > li{ list-style:none; } .dropdown > ul { position:relative; left: -100vw; display:inline-block; border: 1px solid black; padding: 5px; } .dropdown > ul li:hover, .dropdown > ul li:focus { background: #A9BCF5; } .dropdown > input[type="checkbox"]:checked ~ ul, .dropdown > ul:target { left: 0; } button{ font-size: 14px; margin: 0px; width:100%; } </style> <div class="dropdown"> <input type="checkbox" id="my-dropdown" value="" name="my-checkbox"> <label for="my-dropdown" data-toggle="dropdown"> Alle Namen anzeigen </label> <ul> <li> <button type="submit" name="filename" value="file1"> file1 </button> </li> <li> <button type="submit" name="filename" value="file2"> file1 </button> </li> <li> <button type="submit" name="filename" value="file3"> dieser name ist sehr lang lang </button> </li> </ul> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!