выравнивая форму в меню нав

Question

CSS: Это, предполагают, чтобы быть в левой части первой навигации, которая является одеждой

#nav { 
width:95%; 
font-family: Tahoma; 
font: bold; 
color: #00FFFF; 
float: none; 
    } 
.form{ 
    height:50px; 
    position: absolute; 
    text-align:center; 
    font-size:16px; 
    font-family:Candara; 
    color:#00FFFF; 
    background-color: transparent; 
    min-width: 160px; 
    float:left-wards; 


} 
.dropbtn { 
    background-color: transparent; 
    color: #00FFFF; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: transparent; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index:1000; 
} 

.dropdown-content a { 
    color: #00FFFF; 
    padding: 6px 16px; 
    text-decoration: none; 
    display: block; 
    z-index:1000; 
} 

.dropdown-content a:hover {background-color: transparent} 

.dropdown:hover .dropdown-content { 
    display: block; 
    z-index:1000; 
} 

.dropdown:hover .dropbtn { 
    background-color: transparent; 
} 

СЧА МЕНЮ: Это главное меню навигации предполагает, чтобы быть радио мужчина или женщина должна быть рядный с навигацией, но его не случай здесь

<nav> 
    <div id="nav" align="center"> 
     <div style="display:inline-block"> 
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
     <form class="form"> 
      <input type="radio" id="male" name="gender" value="male"> Male 
      <input type="radio" id="female" name="gender" value="female"> Female 
     </form> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <div class = "dropdown" width = "10"> 

      <button class="dropbtn">Clothing</button> 
        <div class="dropdown-content"> 
         <a id="formal" href="#formal">Formal</a></br> 
           <a id="maleFormal" style="display:none" href="formalM.html">Male Formal</a> 
           <a id="femaleFormal" style="display:none" href="formalF.html">Female Formal</a> 
         <a id="shirt" href="#shirt">Shirt</a></br> 
           <a id="maleShirt" style="display:none" href="shirtM.html">Male Shirt</a> 
           <a id="femaleShirt" style="display:none" href="shirtF.html">Female Shirt</a> 
         <a id="jeans" href="#jeans">Jeans</a></br> 
           <a id="maleJeans" style="display:none" href="jeansM.html">Pants</a> 
           <a id="femaleJeans" style="display:none" href="jeansF.html">Jeans</a> 
         <a id="shortandskirt" href="#shortandskirt">Short and Skirt</a></br> 
           <a id="maleshortandskirt" style="display:none" href="shorts.html">Shorts</a> 
           <a id="femaleshortandskirt" style="display:none" href="skirts.html">Skirts</a> 
        </div> 
      </div> 
      <script> 
       $(document).ready(function(){ 
        $("#male").click(function(){ 
         $("#formal").hide(); 
         $("#maleFormal").show(); 
         $("#femaleFormal").hide(); 
        }); 
        $("#female").click(function(){ 
         $("#formal").hide(); 
         $("#maleFormal").hide(); 
         $("#femaleFormal").show(); 
        }); 
       }); 
      </script> 

      <script> 
       $(document).ready(function(){ 
        $("#male").click(function(){ 
         $("#shirt").hide(); 
         $("#maleShirt").show(); 
         $("#femaleShirt").hide(); 
        }); 
        $("#female").click(function(){ 
         $("#shirt").hide(); 
         $("#maleShirt").hide(); 
         $("#femaleShirt").show(); 
        }); 
       }); 
      </script> 

      <script> 
       $(document).ready(function(){ 
        $("#male").click(function(){ 
         $("#jeans").hide(); 
         $("#maleJeans").show(); 
         $("#femaleJeans").hide(); 
        }); 
        $("#female").click(function(){ 
         $("#jeans").hide(); 
         $("#maleJeans").hide(); 
         $("#femaleJeans").show(); 
        }); 
       }); 
      </script> 

      <script> 
       $(document).ready(function(){ 
        $("#male").click(function(){ 
         $("#shortandskirt").hide(); 
         $("#maleshortandskirt").show(); 
         $("#femaleshortandskirt").hide(); 
        }); 
        $("#female").click(function(){ 
         $("#shortandskirt").hide(); 
         $("#maleshortandskirt").hide(); 
         $("#femaleshortandskirt").show(); 
        }); 
       }); 
      </script> 

     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Accesory</button> 
        <div class="dropdown-content"> 
         <a href="#ring">Ring</a></br> 
         <a href="#necklace">Necklace</a></br> 
         <a href="#pendant">Pendant</a></br> 
         <a href="#bracelet">Bracelet</a></br> 
         <a href="#eye glasses">Eye Glasses</a></br> 
         <a href="#sun glasses">Sun Glasses</a></br> 
         <a href="#fashion glasses">Fashion Glasses</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Shoe</button> 
        <div class="dropdown-content"> 
         <a href="#rubber shoes">Rubber Shoes</a></br> 
         <a href="#running shoe">Running Shoe</a></br> 
         <a href="#formal shoe">Formal Shoe</a></br> 
         <a href="#flat shoes">Flat Shoes</a></br> 
         <a href="#high heels">High Heels</a></br> 
         <a href="#sandals">Sandals</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Bags</button> 
        <div class="dropdown-content"> 
         <a href="#sling bags">Sling bags</a></br> 
         <a href="#backpack">Backpack</a></br> 
         <a href="#office Bags">Office Bags</a></br> 
         <a href="#fahion bags">Fashion bags</a></br> 
         <a href="#gym bag">Gym Bag</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Watches</button> 
       <div class="dropdown-content"> 
         <a href="#rolex">Rolex</a></br> 
         <a href="#swatch">Swatch</a></br> 
         <a href="#timex">Timex</a></br> 
        </div> 

     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Kids</button> 
       <div class="dropdown-content"> 
         <a href="#clothing">Clothing</a></br> 
         <a href="#accesory">Accesory</a></br> 
         <a href="#shoe">Shoe</a></br> 
         <a href="#bags">Bags</a></br> 
         <a href="#watch">Watch</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Toys</button> 
        <div class="dropdown-content"> 
         <a href="#cars">Cars</a></br> 
         <a href="#guns">Guns</a></br> 
         <a href="#kitchen sets">kitchen sets</a></br> 
         <a href="#doll">Doll</a></br> 
         <a href="#doll house">Doll House</a></br> 
         <a href="#stuff toys">Stuff Toy</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Unisex</button> 
        <div class="dropdown-content"> 
         <a href="#clothing">Clothing</a></br> 
         <a href="#accesory">Accesory</a></br> 
         <a href="#shoe">Shoe</a></br> 
         <a href="#bags">Bags</a></br> 
         <a href="#watch">Watch</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Brands</button> 
        <div class="dropdown-content"> 
         <a href="#nike">Nike</a></br> 
         <a href="#guess">Guess</a></br> 
         <a href="#humane">Humane</a></br> 
         <a href="#prada">Prada</a></br> 
         <a href="#LV">LV</a></br> 
        </div> 
     </div> 
     <div class = "dropdown" width = "10"> 
      <button class="dropbtn">Deals</button> 
        <div class="dropdown-content"> 
         <a href="#50% discounts">50% Discounts</a></br> 
         <a href="#60% discounts">60% Discounts</a></br> 
         <a href="#70% discounts">70% Discounts</a></br> 
         <a href="#free shipping">Free Shipping</a></br> 
         <a href="#coupons">Coupons</a></br> 
        </div> 
     </div> 
    </div> 
</nav> 

Это результат

Answer 1

Просто нужно удалить прописку с кнопки, и она будет работать нормально. padding: 16px; удалить из пульта.

#nav { 
 
    width: 95%; 
 
    font-family: Tahoma; 
 
    font: bold; 
 
    color: #00FFFF; 
 
    float: none; 
 
} 
 
.form { 
 
    height: 50px; 
 
    position: absolute; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-family: Candara; 
 
    color: #00FFFF; 
 
    background-color: transparent; 
 
    min-width: 160px; 
 
    float: leftwards; 
 
} 
 
.dropbtn { 
 
    background-color: transparent; 
 
    color: #00FFFF; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: transparent; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1000; 
 
} 
 
.dropdown-content a { 
 
    color: #00FFFF; 
 
    padding: 6px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    z-index: 1000; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: transparent 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    z-index: 1000; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: transparent; 
 
}

<nav> 
 
    <div id="nav" align="center"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <form class="form"> 
 
     <input type="radio" id="male" name="gender" value="male">Male 
 
     <input type="radio" id="female" name="gender" value="female">Female 
 
    </form> 
 
    <div class="dropdown"> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">Accesory</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#ring">Ring</a> 
 
      <a href="#necklace">Necklace</a> 
 
      <a href="#pendant">Pendant</a> 
 
      <a href="#bracelet">Bracelet</a> 
 
      <a href="#eye glasses">Eye Glasses</a> 
 
      <a href="#sun glasses">Sun Glasses</a> 
 
     </div> 
 

 
     </div> 
 
     <div class="dropdown" width="10"> 
 
     <button class="dropbtn">Shoe</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#rubber shoes">Rubber Shoes</a> 
 
      </br> 
 
      <a href="#running shoe">Running Shoe</a> 
 
      </br> 
 
      <a href="#formal shoe">Formal Shoe</a> 
 
      </br> 
 
      <a href="#flat shoes">Flat Shoes</a> 
 
      </br> 
 
      <a href="#high heels">High Heels</a> 
 
      </br> 
 
      <a href="#sandals">Sandals</a> 
 
      </br> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

Просто используйте следующий CSS, чтобы решить вашу проблему:

#nav > div { 
    display: inline-block; 
    vertical-align: top; 
}