CODEWITHSUNDEEP
htmlcsssassnav
user3731438
user3731438

Reputation: 283

Elements within nav not highlighting whole <li> on hover

I have a menu on my website using

On load the background is red. On hover of an element, it changes to an orange shade, however, only a small portion is orange. How can i get that whole <li> to highlight orange on hover?

HTML:

<nav class="site-nav">
    <ul>
        <li class=""> <a href="index.html" title="home"><span class="icon-home"></span></a>

        </li>
        <li> <a>Contact Us</a>

        </li>
        <li> <a>My Products</a>

        </li>
        <li> <a>Our Locations</a>

        </li>
        <li> <a>FAQs</a>

        </li>
        <li> <a>Complaints</a>

        </li>
    </ul>
</nav>

CSS:

.site-nav {


height: 20px;
  background: #ac0c0c;
  /* Old browsers */
  background-image: -moz-linear-gradient(#860909, #860909);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #860909), color-stop(100%, #860909));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(#860909, #860909);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(#860909, #860909);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(#860909, #860909);
  /* IE10+ */
  background-image: linear-gradient(#860909, #860909);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#860909', endColorstr='#860909',GradientType=0 );
  /* IE6-8 */
  line-height: 3.0129;
  /*@include media-bp($bp10, true) {*/
  height: 48px;
  background: #ac0c0c;
  /* Old browsers */
  background-image: -moz-linear-gradient(#860909, #860909);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #860909), color-stop(100%, #860909));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(#860909, #860909);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(#860909, #860909);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(#860909, #860909);
  /* IE10+ */
  background-image: linear-gradient(#860909, #860909);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#860909', endColorstr='#860909',GradientType=0 );
  /* IE6-8 */
  line-height: 3.0129;
  /*}*/ }
  .site-nav li {
    display: inline;
    list-style-type: none; }
  .site-nav li a {
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    text-decoration: none; }
  .site-nav a:hover {
    background-color: #FF6600;
    color: white;
    text-shadow: none; }
  .site-nav li {
    display: inline;
    list-style-type: none; }
  .site-nav li a {
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    text-decoration: none; }
  .site-nav a:hover {
    background-color: #FF6600;
    color: white;
    text-shadow: none; }

Here's a fiddle: http://jsfiddle.net/2ztHM/

Thanks

Upvotes: 1

Views: 557

Answers (3)

Oam Psy
Oam Psy

Reputation: 8663

site-nav li needs display: inline-block;

.site-nav li a needs display: block;

Upvotes: 1

nsthethunderbolt
nsthethunderbolt

Reputation: 2097

Demo, fixed li issue

http://jsfiddle.net/2ztHM/6/

And You were using less part of the body, rest links were hidden, so removed:

body{
width:70%
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115066

You should make the li to be display:inline-block and the a as display:block

JSfiddle Demo

CSS .

site-nav li {
    display: inline-block;
    list-style-type: none; }
  .site-nav li a {
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    display: block;
    color: white;
    text-decoration: none;}

Upvotes: 1

Related Questions