CSS: drop down menu not selecting correctly; margin spacing?
我有一个下拉菜单,当您将鼠标悬停在某个选项上时,它会显示子菜单,但在您将光标向下移动时会显示该子菜单。有时菜单的其余部分将隐藏。我已经注意到,除非有人可以不同地告诉我,否则我认为这是罪魁祸首。
下面是一张图片,显示了我的意思;这两个选项之间有一个小间隙,我假设当您使光标移到该点上时,它会"悬停"并隐藏它
任何帮助将不胜感激。
1 | .menu ul { margin = ..;} |
上面的代码使页边距更大,但是,即使将其设置为0,它似乎仍然存在。
这是我的菜单
的HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <td align="center" bgcolor="#666666"> <ul> <li> Bar Equipment <ul> <li> Tills </li> <li> Bar Furniture </li> <li> Bar Sundries </li> ... </td> |
这是菜单类的CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | @charset"utf-8"; * { margin: 0px; padding: 0px; } .menu { margin: 0px; text-align: center; background: #efefef; padding: 0px; } .menu ul ul { display: none; } .menu ul li:hover > ul { display: block; } .menu ul { background: #efefef; padding: 0; list-style: none; position: relative; display: inline-table; margin: 0px; } .menu ul:after { content:""; clear: both; display: block; } .menu ul li { float: left; } .menu ul li:hover { background: #999; } .menu ul li:hover a { color: #fff; } .menu ul li a { display: block; padding: 10px; color: #757575; text-decoration:none; } .menu ul ul { background: #efefef; padding: none; position: absolute; top: 100%; /* ?? */ } .menu ul ul li { float: none; border-top: 0px solid #6b727c; border-bottom: 0px solid pink; position: relative; } .menu ul ul li a { padding: 10px; color:#fff; display: block; } .menu ul ul li a:hover { background: red; } .menu ul ul ul { position: absolute; left: 100%; top:0; padding: 0; } .menu ul ul ul li { float: none; border-top: 0px solid #6b727c; border-bottom: 0px solid pink; position: relative; } .menu ul ul ul li a { padding: 10px; color: #fff; } .menu ul ul ul li a:hover { background: red; */ } .menu ul ul ul ul { position: absolute; left: 100%; } |
请参阅jsfiddle:http://jsfiddle.net/p1kuzzdo/
尝试使用此CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | @charset"utf-8"; * { margin: 0px; padding: 0px; } .menu { background: none repeat scroll 0 0 #efefef; height: 50px; line-height: 50px; margin: 0; padding: 0; text-align: center; } .menu ul ul { display: none; } .menu ul li:hover > ul { display: block; } .menu ul { height: 50px; line-height: 50px; list-style: outside none none; margin: 0; padding: 0; position: relative; text-align: center; } .menu ul:after { content:""; clear: both; display: block; } .menu ul li { float: left; padding: 0 10px; } .menu ul li:hover { background: #999; } .menu ul li:hover a { color: #fff; } .menu ul li a { color: #757575; display: block; text-decoration: none; } .menu ul ul { background: none repeat scroll 0 0 #efefef; padding: 0; position: absolute; top: 100%; } .menu ul ul li { border-bottom: 0 solid pink; border-top: 0 solid #6b727c; float: none; margin: 0; padding: 0; position: relative; } .menu ul ul li a { padding: 10px; color:#fff; display: block; } .menu ul ul li a:hover { background: red; } .menu ul ul ul { position: absolute; left: 100%; top:0; padding: 0; } .menu ul ul ul li { float: none; border-top: 0px solid #6b727c; border-bottom: 0px solid pink; position: relative; } .menu ul ul ul li a { color: #fff; } .menu ul ul ul li a:hover { background: red; */ } .menu ul ul ul ul { position: absolute; left: 100%; } |