I have some html in this format:
<ul id="foo">
<li class="bar"><a href="#">Reports</a>
<span>
<a href="#" class="fooLink">First Report</a>
<a href="#" class="fooLink">Second Report</a>
</span>
</li>
</ul>
Essentially, I want the 'reports' link in the menu to expand when clicked, and display the links below it, padded to the side, so it looks like this:
Reports
First report
Second report
This is my css code:
.fooLink
{
padding-left: 20%;
padding-top: 0px;
display:block;
}
However this doesn't work. If I examine the links in firebug, I see that the display:block;
line is blocked. However if I do this:
<a href="#"
style="padding-left:20%; padding-top:0px; display:block;">Second Report</a>
Then it works as I want it. Why doesn't it work if i put it in the css class?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…