如何在html/css中創建下拉菜單登錄菜單

-1

我正在嘗試在html/css中創建下拉菜單登錄/註冊表單我希望它能從我的導航欄中下拉菜單，但我無法正常工作任何人都可以給我一些指點，告訴我什麼，我做錯了如何在html/css中創建下拉菜單登錄菜單

這裏是我的網頁的的jsfiddle我創造 https://jsfiddle.net/nikhendricks43/cqod7p57/#&togetherjs=lxPBaomiBb

或這裏是我的代碼：

：HTML

<title>MVBT FFA Chapter</title> 
<head> 


</head> 




<div id="header"> 
<a id="addpost"href="editnews.html">+</a> 
     <center><img src="ffaheader.png" alt-"ffa header image" width="70%"  height="40%"></center> 
</div> 

    <div id="nav"> 

    <ul> 
    <li><a href="file:///E:/ffachapterpage/home.html">Home</a></li> 
    <li><a href="file:///E:/ffachapterpage/events.html">Events</a></li> 
    <li><a href="file:///E:/ffachapterpage/contact.html">Contact</a></li> 
    <li><a href="file:///E:/ffachapterpage/donate.html">Donate</a></li> 
    <li><a href="file:///E:/ffachapterpage/about.html">About</a></li> 
    <div class="dropdown"> 
<button onclick="dropdown()" class="dropbtn">Dropdown</button> 
    <div id="myDropdown" class="dropdown-content"> 
<input type="text" placeholder="email"> 
<p>Password<p> 
<br/> 
<input type="password" placeholder="password"> 
    </div> 
</div> 





</body> 
</html> 

    <script> 
    function dropdown() { 
     document.getElementById("myDropdown").classList.toggle("show"); 
    }  
    </script> 
    </ul> 









    <body> 









</div> 

    <body bgcolor="grey"> 


     <div id="bodydiv"> 

      <iframe src="file:///E:/ffachapterpage/newscontent.html"></iframe> 




     </div> 



    </body> 




    </html>

，這裏是我的CSS：

.dropbtn { 
     background-color: #4CAF50; 
     color: white; 
     padding: 16px; 
     font-size: 16px; 
     border: none; 
     cursor: pointer; 
    } 

    .dropbtn:hover, .dropbtn:focus { 
     background-color: #3e8e41; 
    } 

    .dropdown { 

     align-content: right; 
     position: relative; 

    } 

    .dropdown-content { 
     width: 1000px; 
     height: 500px; 
     padding:5px; 
     display: none; 
     position: absolute; 
     background-color: blue; 
     min-width: 160px; 
     overflow: auto; 
     box-shadow: 0px 0px 3px 16px rgba(0,0,0,0.2); 
    } 

    .dropdown-content a { 
     color: black; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
    } 

    .dropdown a:hover {background-color: blue} 

    .show {display:block;} 

    #sidebarleft{ 
    width:20%; 
    height:100%; 
    background:grey; 


    } 
     #addpost{ 
      text-decoration: none; 
      margin-top: 20px; 
      margin-left: 20px; 
     } 
     #addpost:hover{ 
      font-size: 20px; 
      color:grey; 

     } 

     #newsframe{ 
      padding-left:20%; 
      width:65%; 
      height:100%; 
      border:10px; 

    } 

    #header{ 
     background: #fcec5d; 


     } 







    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #fbec5d; 
    } 

    li { 
     float: left; 
    } 

    li a { 
     display: inline-block; 
     color: blue; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li a:hover { 
    background-color: grey; 
    } 


    #nav{ 
    width:100%; 
    height:46px; 
    background:#fbec5d; 
    } 
    #headerimage{ 
     width:100%; 
     height:35%; 
     display:flex; 

    } 
    #bodydiv{ 

     width:100%; 
     height:100%; 
     background:blue; 
     display:flex; 




}

來源

2016-02-11 Nik Hendricks

See this fiddle I made based on your code

HTML：

<div class="container"> 
    <li><a href="file:///E:/ffachapterpage/home.html">Home</a></li> 
    <li><a href="file:///E:/ffachapterpage/events.html">Events</a></li> 
    <li><a href="file:///E:/ffachapterpage/contact.html">Contact</a></li> 
    <li><a href="file:///E:/ffachapterpage/donate.html">Donate</a></li> 
    <li><a href="file:///E:/ffachapterpage/about.html">About</a></li> 
    <div class="dropdown"> 
    <span>Your dropdown text</span> 
    <div class="dropdown-content"> 
     <label class="margin-bottom-5">Email: <label><br> 
     <input class="margin-bottom-5" type="text" placeholder="email"><br> 
     <label class="margin-bottom-5">Password: <label><br> 
     <input class="margin-bottom-5" type="password" placeholder="password"><br> 
     <input class="margin-bottom-5" type="submit" value="Connect"/> 
    </div> 
    </div> 
</div>

CSS：

/* When the .dropdown div gets hovered, 
we change the display property of the dropdown 
content in order for it to be shown */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 


/* "An element with position: relative; 
is positioned relative to its normal position" */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/*"An element with position: absolute; is positioned 
relative to the nearest positioned ancestor" 
In this case, it's positioned relative to the 
.dropdown div. I then played with the 
left and top properties in order to align it properly 
*/ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    left:0px; 
    top:46px; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    padding: 12px 16px; 
    z-index: 1; 
    border:1px solid black; 
} 

/*Under this comment, it's mostly for styles. You can ignore what's below*/ 
a:hover { 
    background-color: grey; 
} 

li { 
    list-style-type: none; 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

li a, .dropdown{ 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover{ 
    background-color: grey; 
} 

.margin-bottom-5 { 
    margin-bottom: 5px; 
} 

.container { 
    border:1px solid black; 
}

來源

2016-02-11 02:43:47 Bubblesphere

非常感謝你，我認爲這是我正在尋找的 –

抱歉打擾你，但有一個問題，當我將鼠標懸停在下拉部分上時，它顯示在我爲我的網站設置的div的後面，我無法看到它在所有這一切都與Z指數有什麼關係，也許我是相當新的HTML/CSS –

您設置的股利有更大的Z指數比1？用更新的提琴在帖子上發佈編輯 – Bubblesphere

如何在html/css中創建下拉菜單登錄菜單

回答

相關問題