[Solved] Css Problem with Nav

[muncher39]

Hi all im having a hard time trying to achieve something via css and wondering if someone can see what im doing wrong?

I have an arrow img on my ul li a span element and i want it to overlap the slider container which is directly below the nav when the user hovers over the nav item or selects it.

Here is my code

Html

<header>
<p class="site-strap"><span>No Job is too small</span></p>
  <h1><a title="Valentines Executive Travel" href="/"><span> Executive Travel</span></a></h1>
  <nav>
    <ul>
      <li><a href="/" class="selected"><span>Home</span></a></li>
      <li><a href="/"><span>About us</span></a></li>
      <li><a href="/"><span>Our Services</span></a></li>
      <li><a href="/"><span>Our Drivers</span></a></li>
      <li class="last"><a href="/"><span>Contact us</span></a></li>
    </ul>
  </nav>
   </header>

css

nav {background:url(../images/nav-tail.png) repeat-x left top; margin-bottom:-3px; position:relative; border-top-left-radius:5px; border-top-right-radius:5px;}
nav ul {height:58px; width:100%; overflow:hidden;}
nav ul li {float:left; text-transform:uppercase; font-size:16px; line-height:1.2em; background:url(../images/divider.png) no-repeat right 4px;padding:4px 2px 0 0;}
nav ul li.last {background:none; padding-right:0}
nav ul li a {display:block; text-decoration:none; color:#fff; width:198px; text-align:center; padding:14px 0 0 0; cursor:pointer;background:url(../images/spacer.gif);}

nav ul li a span {display:block; height:40px;}
nav ul li a:hover, nav ul li a.selected {background:url(../images/nav-act.png) repeat-x left top;}
nav ul li a:hover span, nav ul li a.selected span {background:url(../images/nav-arrow.png) no-repeat center bottom;}

I am trying to achieve something like this

http://all-free-download.com/templates/templates_preview.php?url=http://images.all-free-download.com/free-website-templates-preview/speedracing_template_2235/ (see the little white arrow in the nav)

Thanks

Paul

[Paulie_D]

We usually do that with a pseudo element, however, could you make a Codepen.io demo please?

[muncher39]

Hi,

Please note that this is a very quick put together to try and illustrate my issues. Please see the little gold arrow below the home tab in the nav. I would like to fetch the slider up (<section class="slider-container">) so that the arrow overlaps it like the example i posted previously (http://all-free-download.com/templates/templates_preview.php?url=http://images.all-free-download.com/free-website-templates-preview/speedracing_template_2235/ ). Please see the link to my example http://muncher39.herobo.com/

Thanks

Paul

[Paulie_D]

Could you make a Codepen.io demo please?

We don’t want to have to wade through all the HTML & CSS of your site using Developer Tools.

[muncher39]

How do i add images to the code pen file because the navigation and the arrow is an image?

Paul

[Paulie_D]

Host them online (I use photobucket.com) and use the link they provide you for each image in your HTML.

[muncher39]

Ill have to leave it mate never used either before. Plus I call the images from the css file

Thanks anyway

Paul

[Author]

Posts