Margin Bottom Not Working

What is preventing margin bottom from working here? http://jsfiddle.net/cq8VC/1/

I jus开发者_开发百科t want the active one to be jumping up in the air about 10px.

---

Ok, by adding a span around the internal elements of the list items as follows:

<div id="navigation"> 
    <ul id="links"> 
        <li><a href="index.html"><span>Home</span></a></li> 
        <li><a class="active" href="projects.html"><span>Projects</span></a></li> 
        <li><a href="whyme.html"><span>Why Me?</span></a></li> 
        <li><a href="contact.html"><span>Contact</span></a></li> 
    </ul> 
</div>

And by changing your CSS to the following you should end up with the desired result:

#navigation ul#links li a.active{color:#1161A5; }
#navigation ul#links li a.active span { position: relative; top: -10px; }
#navigation ul#links li a{ font-family:LeagueGothicRegular;color:#ADC060;text-decoration:none;padding-left:10px;border-left:2px solid #1161A5;}
#navigation ul#links li a:hover,#navigation li:active{color:#1161A5;}
#navigation ul#links li:first-child a{border-left:none;}
#navigation ul#links li{float:left;font-size:1.5em;margin-left:10px;}

---

How about this: http://jsfiddle.net/vXaeP/1/

CSS

#navigation ul#links li{
    padding-left:10px;
    border-left:2px solid #1161A5;
    float:left;
    font-size:1.5em;
    margin-left:10px;
}

#navigation ul#links li a{
    font-family:LeagueGothicRegular;
    color:#ADC060;
    text-decoration:none;
}

#navigation ul#links li a.active{
    color:#1161A5;
    position: relative;
    bottom: 10px;
}

#navigation ul#links li a:hover {
    color:#1161A5;
}

#navigation ul#links li:first-child {
    border-left: 0px;
}

HTML

<div id="navigation">
    <ul id="links">
        <li><a href="index.html">Home</a></li>
        <li><a class="active" href="projects.html">Projects</a></li>
        <li><a href="whyme.html">Why Me?</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

---

maybe use :

#navigation ul#links li a.active{color:#1161A5;position:relative;top:-10px;}

(since on inline elements)

---

I can imagine margin-bottom will not push the content up, but merely push everything else down.

Have you tried messing with positions? Try adding position: relative to the

and position: absolute to the tag, but only the active link. Then you can reference it in CSS in a manner such as this.

li { position: relative; } a:hover { position: absolute; top: -10px; }

I've not tested anything yet so don't hold me to it!! Ha!