我制作了一个简单的CSS下拉菜单,但我遇到了一些填充问题。当我将鼠标悬停在元素上时,我希望新的背景颜色可以很好地填充整个元素,但它现在仅限于文本。有人可以看看并告诉我错误: http://jsfiddle.net/2pdxx4fq/
HTML:
<ul id="navbar">
<li><a href="#">Attendance</a>
<ul>
<li><a href="#">Upload</a></li>
<li><a href="#">Report</a></li>
</ul>
</li>
<li><a href="#">Leave</a>
<ul>
<li><a href="#">Report</a></li>
<li><a href="#">Holidays</a></li>
</ul>
</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Log out</a></li>
</ul>
CSS:
/* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
* License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ========= End of CSS Reset ============ */
#navbar {
margin: 20px 0px;
background-color: #444;
}
#navbar a {
text-decoration: none;
color: #fff;
}
#navbar a:hover {
background-color: #AAA;
color: #000;
}
#navbar li {
display: inline-block;
position: relative;
padding: 10px;
}
#navbar li ul {
background-color: #444;
position: absolute;
display: none;
}
#navbar li:hover > ul {
display: block;
}
答案 0 :(得分:1)
改变这个:
#navbar a:hover {
对此:
#navbar li:hover {
这种方式将是整个li
元素在悬停时会发生什么变化,而不仅仅是锚a
。
答案 1 :(得分:1)
将悬停应用于li
。
/* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
* License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ========= End of CSS Reset ============ */
#navbar {
margin: 20px 0px;
background-color: #444;
}
#navbar a {
text-decoration: none;
color: #fff;
}
#navbar li:hover {
background-color: #AAA;
color: #000;
}
#navbar li ul {
margin-top: 10px;
margin-left: -10px;
}
#navbar li {
display: inline-block;
position: relative;
padding: 10px;
width: 70px;
text-align: center;
}
#navbar li ul {
background-color: #444;
position: absolute;
display: none;
}
#navbar li:hover > ul {
display: block;
}
<ul id="navbar">
<li><a href="#">Attendance</a>
<ul>
<li><a href="#">Upload</a>
</li>
<li><a href="#">Report</a>
</li>
</ul>
</li>
<li><a href="#">Leave</a>
<ul>
<li><a href="#">Report</a>
</li>
<li><a href="#">Holidays</a>
</li>
</ul>
</li>
<li><a href="#">Profile</a>
</li>
<li><a href="#">Log out</a>
</li>
</ul>
答案 2 :(得分:0)
从li
移除填充,并将其与a
一起添加到display:block
(也在锚点上)。