懸停導航欄 - CSS
[英]Navigation bar on hover - CSS
問題描述
我有這個代碼，但它不起作用。 當我將鼠標懸停在主菜單上時，子菜單不顯示。 顏色更改似乎有效，但第二個列表在懸停時未顯示在主菜單下。 我找不到問題...請幫忙
<html> <head> <title>test</title> <style type="text/css"> #navigationbar { position: relative; padding: 0; margin: 0; height: 30px; width: 90%; } #navigationbar ul { position: absolute; margin: 0; padding: 0; height: 100%; width: 100%; list-style-type: none; background-color: #eeeeee; overflow: visible; } #navigationbar ul>li { display: block; float: left; height: auto; width: 130px; } #navigationbar li>a { display: block; height: 100%; padding: 0 0 0 10px; width: 115px; border-right: 1px black solid; font-size: 17px; font-family: sans-serif; background-color: #eeeeee; color: #5d5636; line-height: 30px; text-decoration: none; } #navigationbar ul ul { margin-top: 2px; display: none; width: 160px; height: auto; background-color: #dddddd; position: static; border: 1px #666666 solid; } #navigationbar ul ul li { position: relative; float: none; display: block; height: 28px; width: 100%; border: none; } #navigationbar ul ul li>a { height: 100%; width: 96%; padding: 0 0 0 4%; line-height: 28px; background-color: transparent; border: none; color: #000000; font-size 12px; font-style: normal; } #navigationbar li:hover > a { color: #220000; background-color: #eeeabe; } #navigationbar li:hover > ul { display: block; } </style> </head> <body> <h1>Nagłówek</h1> <nav id="navigationbar"> <ul> <li><a href="/home.html">Home</a></li> <li><a href="/AAAtest.html">A</a></li> <ul> <li><a href=/a.html>aaaaa</a></li> <li><a href=/b.html>bbbbb</a></li> <li><a href=/c.html>ccccc</a></li> </ul> <li><a href="/BBBtest.html">B</a></li> <ul> <li><a href=/aa.html>AAAA</a></li> <li><a href=/bb.html>BBBBB</a></li> <li><a href=/cc.html>CCCCC</a></li> </ul> </ul> </nav> </body> </html>謝謝。
1 個解決方案
解決方案1
1 已采納 2017-01-19 19:50:06
你把li的結束標簽放錯了地方
<html> <head> <title>test</title> <style type="text/css"> #navigationbar { position: relative; padding: 0; margin: 0; height: 30px; width: 90%; } #navigationbar ul { position: absolute; margin: 0; padding: 0; height: 100%; width: 100%; list-style-type: none; background-color: #eeeeee; overflow: visible; } #navigationbar ul>li { display: block; float: left; height: auto; width: 130px; } #navigationbar li>a { display: block; height: 100%; padding: 0 0 0 10px; width: 115px; border-right: 1px black solid; font-size: 17px; font-family: sans-serif; background-color: #eeeeee; color: #5d5636; line-height: 30px; text-decoration: none; } #navigationbar ul ul { margin-top: 2px; display: none; width: 160px; height: auto; background-color: #dddddd; border: 1px #666666 solid; } #navigationbar ul ul li { position: relative; float: none; display: block; height: 28px; width: 100%; border: none; } #navigationbar ul ul li>a { height: 100%; width: 96%; padding: 0 0 0 4%; line-height: 28px; background-color: transparent; border: none; color: #000000; font-size 12px; font-style: normal; } #navigationbar li:hover > a { color: #220000; background-color: #eeeabe; } #navigationbar li:hover > ul { display: block; } </style> </head> <body> <h1>Nagłówek</h1> <nav id="navigationbar"> <ul> <li><a href="/home.html">Home</a> </li> <li><a href="/AAAtest.html">A</a> <ul> <li><a href=/a.html>aaaaa</a> </li> <li><a href=/b.html>bbbbb</a> </li> <li><a href=/c.html>ccccc</a> </li> </ul> </li> <li><a href="/BBBtest.html">B</a> <ul> <li><a href=/aa.html>AAAA</a> </li> <li><a href=/bb.html>BBBBB</a> </li> <li><a href=/cc.html>CCCCC</a> </li> </ul> </li> </ul> </nav> </body> </html>
WordPress / CSS-子菜單懸停下拉樣式添加到導航欄
[英]Wordpress/CSS - Submenu hover dropdown styles added to navigation bar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.