html / css下拉列表沒有出現
[英]html/css dropdown not appearing
問題描述
一直在使用html / css中的導航欄，並且沒有顯示下拉列表。 我一直在玩代碼但似乎沒什么用。 一旦我從.dropdown-content類中刪除了display：none ，它似乎就出現了......
有人可以看看嗎？ 我已經花了幾個小時閱讀這個問題上的每一個帖子，但無法理解。 Thx提前！
這是我的CSS和HTML片段：
body { width: 100%; background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5"); background-size: cover; } #navdiv { opacity: 0.70; filter: (opacity=70; ) } #navdiv ul { list-style-type: none; width: 100%; background: white; line-height: 3rem; float: right; overflow: hidden; } #navdiv ul a { text-decoration: none; color: black; padding: 2em; } #navdiv ul li { float: right; margin-right: 1em; } #logo { float: left !important; font-size: 2em; margin-left: 1em; } #navdiv ul #logo:hover { background: none; } #navdiv ul li a:hover, dropdown:hover #dropbtn { background: #B266FF; transition: all 0.8s; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: center; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: inline-block; }
<body> <div id="maindiv"> <div id="navdiv"> <ul> <li id="logo">Potayto-Potatoh</li> <li class="dropdown"><a href="#about">About</a></li> <li><a href="#portfolio" id="dropbtn">Portfolio</a> <div class="dropdown-content"> <a href="#">work 1</a> <a href="#">work 2</a> <a href="#">work 3</a> </div> </li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </body>
4 個解決方案
解決方案1
3 2016-11-03 12:52:08
您需要為投資組合li添加下拉列表，因為它沒有下拉內容
HTML：
<li class="dropdown"><a href="#portfolio" id="dropbtn">Portfolio</a>
解決方案2
1 2016-11-03 12:51:50
dropdown-content div不在dropdown div下，parent <li>元素缺少dropdown類規范。
解決方案3
0 2016-11-03 12:53:12
將觸發器類添加到li元素。 您的CSS對於觸發器也是不正確的，您將引用.dropdown（這實際上是關於“約”的li的類！）
有關工作示例，請參閱https://jsfiddle.net/qxjbtot1/ 。
解決方案4
-1 2016-11-03 12:56:41
body { width: 100%; background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5"); background-size: cover; } #navdiv { opacity: 0.70; filter: (opacity=70; ) } #navdiv ul { list-style-type: none; width: 100%; background: white; line-height: 3rem; float: right; } #navdiv ul a { text-decoration: none; color: black; padding: 2em; } #navdiv ul li { float: right; margin-right: 1em; } #logo { float: left !important; font-size: 2em; margin-left: 1em; } #navdiv ul #logo:hover { background: none; } #navdiv ul li a:hover, dropdown:hover #dropbtn { background: #B266FF; transition: all 0.8s; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: center; } .dropdown-content a:hover { background-color: #f1f1f1 } li:hover div.dropdown-content { display: block; }
<body> <div id="maindiv"> <div id="navdiv"> <ul> <li id="logo">Potayto-Potatoh</li> <li class="dropdown"><a href="#about">About</a></li> <li><a href="#portfolio" id="dropbtn">Portfolio</a> <div class="dropdown-content"> <a href="#">work 1</a> <a href="#">work 2</a> <a href="#">work 3</a> </div> </li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </body>
HTML / CSS下拉菜單問題（下拉列表顯示在同一行）
[英]HTML/CSS Dropdown menu issue (Dropdown list appearing on the same line)
由於懸停時沒有出現下拉菜單，因此出現了問題（只是html-css模板）
[英]Having trouble with the dropdown menu as its not appearing on hovering (just a html-css template)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.