Question

I’m doing this “easy horizontal menu” but I’m facing a funny issue…

Dont know the easiest-way how to solve this problem: if I should use css or jquery (maybe too overkill)

U have HERE an ex. : What I want to do is to hover on every link and hide its side-borders. At the moment I’m getting some extra-width out the hovered-area (the borders) It gets more complex for the 2-links inside the nav if u are following me.

I dont know if I’d use images for the text and borders and hide them every time I hover them or?

Any thoughs how I should achieve this design?

Thank you

 <div class="Main">

        <ul>
            <li><a><p class="borders">film</p></a></li>
            <li><a><p class="borders">film</p></a></li>
            <li><a><p class="borders">film</p></a></li>
            <li><a><p class="borders">film</p></a></li>

        </ul>




    </div>

the css:

 <style>

      .Main{ width: 900px; margin: auto;}
      .Main ul{ overflow: hidden;}
      .Main ul li{ float: left; list-style: none}
      .Main ul li a{
          width: 100px;
          height: 100px;
          background: #ffa07a;
          display: block;
      }

      .Main ul li a p{
          text-align: center;
          position: relative;
          top:40px;

      }
      .Main ul li a:hover{ background: #7cfc00; }
      .borders{
          border-right: 2px solid #7cfc00;

      }

    </style>

Answer 1

Don’t know if I understood your problem correctly, but is this what you want?

http://jsfiddle.net/RGd2P/1/

.Main ul li a:hover{
    background: #7cfc00;
    margin-left:-2px;
    width:101px;
    padding-left:1px;
}