[Solved] Basic Styling Issue – I'm a Little Rusty!

[PeregrineStudios]

Hey all,

Well, I’ve waited too long to continue my coding over the summer (I’m taking a college course in Multimedia design, it includes web coding) and I’ve become a tad rusty. I’m encountering an issue that should be fairly straightforward, but I can’t seem to get it figured out.

Here’s the code I have right now (the embed doesn’t seem to be working, click here for the direct link):

http://codepen.io/anon/pen/AHFgB

The end result is, I want those thick ‘underlines’ underneath the text, I want to make them 0% opacity, and I want to animate them to 100% opacity when moused over.

I know how to do the animation, but for the life of me I can’t get them to style correctly – to be where I need them to be. As you can see, the lines are off to the side of the links, rather than underneath.

The HTML is pretty cluttered at this point – I started with a simple ‘ul’ navigation bar, but that quickly devolved into chains of divs and spans as I tried to find a way to make it work.

Any assistance would be greatly appreciated!

[Senff]

Your pen doesn’t work – try again please!

[PeregrineStudios]

I’m unsure why the link embedding itself doesn’t work, here’s a direct link to the page itself.

[PeregrineStudios]

That sir, is ingenious and exactly what I needed. Thank you so much!

[TheDutchCoder]

Nevermind :-D

[Author]

Posts