basti1012.bplaced.net

ich habe den nachfolgenden Quellcode nach Vorbild umgebaut: <a href="https://codepen.io/markcaron/pen/wdVmpB">https://codepen.io/markcaron/pen/wdVmpB</a> 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?

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>