1 Replies - 489 Views - Last Post: 21 March 2013 - 09:02 PM

#1 poldz123  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 26-October 12

My list highligther is not allign

Posted 21 March 2013 - 07:19 PM

Why is that my List is not allign with the hover blue image as shown in the picture.


/*Menus*/

    .menu {
        background-color: #333;
        width: 100%;
        margin: 10px 10px;
    
     
     box-shadow:
            0 0 1px rgba(0,0,0,0.3),
            0 1px 3px rgba(0,0,0,0.3),
            inset 0 1px rgba(255, 255, 255,1),
            inset 0 -3px 2px rgba(0,0,0,0.25);
    }

    .menu ul {
     padding: 10px;
     margin: 0px;
     list-style: none;
     float:left;

   

      list-style: none;

    

    }
    

    .menu li:hover {
        
    }

    .menu li {
         display: inline;
        padding-left:-9px;
    }

    .menu .menuchoose1 {
        padding: 10px 30px;
        height: 50%;
    }

    .menu .menuchoose {
    
    text-decoration: none;
    margin: 0px 15px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 200;
    font-family: "sans-serif" 100%, Calibri,Arial;
    
    color: #cccdc1
    
    }

      .menu ul li a:hover, .menu ul li .current{
    color: #fff;
    background-color:#0b75b2;}



<div class="menu">
 <ul>
  <li><a class="menuchoose1" href="url"><img src="menuIcon.png" height="30" width="66"></a></li>
  <li><a class="menuchoose" href="url">Stats</a></li>
  <li><a class="menuchoose" href="url">Link 3</a></li>
  <li><a class="menuchoose"href="url">Link 4</a></li>
  <li><a class="menuchoose" href="url">Link 5</a></li>
 </ul>
    <br style="clear:left"/>
</div>



Posted Image

This post has been edited by poldz123: 21 March 2013 - 07:20 PM


Is This A Good Question/Topic? 0
  • +

Replies To: My list highligther is not allign

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: My list highligther is not allign

Posted 21 March 2013 - 09:02 PM

No offense but your css is a mess. If all you are wanting to achieve is a menu with hover effects, it can be a lot simpler than what you have going on.
CSS:
ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
  background: #fff;
  display: block;
}

a:hover {
  background: #333;
}



Something along the lines of that should do the trick.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1