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?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>