Navigation bar on hover - CSS
Question
I have this code, and it doesn't work. The sub-menu is not displaying when I hover over the main-menu. The color changing seems to work but the second list is not showing under main menu on hover. I can't find the problem... Please help
<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>Thanks.
1 answers
solution1
1 ACCPTED 2017-01-19 19:50:06
You had the closing tag for the li in the wrong place
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS navigation bar hover issue
CSS navigation bar hover not activating
CSS Hover will not work on Navigation Bar
navigation bar css remove hover
Hover on CSS is not working for my navigation bar
CSS navigation bar link background color hover
CSS hover slide effect on navigation bar
Navigation bar using html and css, a: hover question
CSS image appearing on navigation bar on hover acting weird?
Wordpress/CSS - Submenu hover dropdown styles added to navigation bar
Related Tags