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="/css_webseite/awesome470.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>