Hello all!
Hoping this is the right place for this <3

I am working on a project for my web class, my last BIG project for the semester, and I am having some issues with my hovering CSS/HTML.
I can't tell if it's even working, but to me it looks like it's popping up UNDERNEATH the image already shown, I've tried some positiong things but it doesn't seem to show up correctly no matter what I am doing.

I can share links and files, Discord is probably the best place to contact me about anything as I can have an easy access record to everything on here and my phone <3
I thank anybody in advance that offers assistance, I've tried many different thing AND I've searched all over google... Nothing seems to be working...

Thanks again <333

Did you index the boxes that are positioned?

https://developer.mozilla.org/en-US/docs...SS/z-index

Hmm... Adding an index didn't seem to help at all :/
I almost wonder If i'm not seeing a hover action at all? Perhaps I am just seeing the highlight of the word popping up?

It's the left nav bar
http://space.wccnet.edu/~tolson5/web110/...jects.html

So you can see what I'm talking about.

So are you wanting the text to Float over/on the image to one side?

The link apparently needs a login so I will try to find another way to show the best example of what I mean.

OKAY So i just copied the part I am having issues with, I felt the instructions would be more clear lol


When moused over, given focus, or when the navigation item reflects the current page the text color changes to #fff, the background color is #333, and the background image is pressed-arrow.png. The attached video shows the effect when these are moused over.

For anyone following lol

Okay, I've narrowed down the issue, I had the image somewhere it shouldn't have been, now I am trying to place a class in a tag without shifting the text in the button.

Here's the snippet I've focused on that seems to be where the problem is

<nav class="float">
<div>
<ul>
<li>
<a href="#"><div> home</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>what we do</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>projects</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>careers</div>
</a>
</li>
<li class="button2">
<a href="">
<div>contact</div>
</a>
</li>
<li class="button2">
<a href="#">
<div> site map</div>
</a>
</li>
</ul>
</div>
</nav>



And the CSS



.button2
{
width: 100px;
background-color: #b2cce5;
padding-left: 30px;
line-height: 2em;
display: block;
margin: 14px;
padding: 0px;

}

nav div ul li a div
{
background: url("../layout4/images/unpressed-arrow.png");
background-repeat: no-repeat;
text-align: center;
color: #fff;
text-indent: 10px;
text-decoration: none;
}


.button2 a:hover
{
width: 100px;
display: block;
text-decoration: none;
color: #fff;
background: url("../layout4/images/pressed-arrow.png");
background-repeat: no-repeat;


}

I do not see an attached video Middy send me a DM on Discord @ latrodectus

I appreciate all the interest here of people willing to help! My project was turned in and I still couldn't figure out the issue (lol) but luckily he didn't dock many points for this.

Thank you again everyone for the interest <3