basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>