Search This Blog

Monday, June 3, 2013

Removing last item menu border in IE8 browsers

 
Welcome to Designers Dairy blog here i have posted How to remove the border in last menu item using jquery to fix in IE8


Step1:

 Html Code :

<nav  class="menu_navigation right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Quick Links </a></li>
      <li><a href="#">Depts & Faculties </a>
            <ul>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor </a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
            </ul>
          </li>
          <li><a href="#">Website</a></li>
        </ul>

</nav>

<script>

$("nav li:last-child")
.css({fontColor:"red", border:"solid 0px #000"})

</script>


</body>

</html>

Step2:

Script Should be include below the menu navigation .if not it doesnt work

Step3:

Include the Jquery library link .if not it doesnt work

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Step4: 

Css with Drop down menu
<style>
ul li {
list-style-type:none;
font-weight:600;
}
.menu_navigation {
margin:50px 0px 0px 0px;
font-size:16px;
}
.menu_navigation ul li {
position: relative;
float: left;
border:none;
}
.menu_navigation li ul {
display: none;
}
.menu_navigation ul li a, .menu_navigation li:hover ul {
display: block;
}
.menu_navigation ul li {
color:#717070;
border-right:solid 1px #ccc;
padding:0px 15px 0px 15px;
white-space: nowrap;
}
.menu_navigation ul li ul li {
border:none !important;
}
.menu_navigation li:hover ul {
position: absolute;
}
.menu_navigation ul li ul li a {
background: url(../images/blue_bullet.gif) no-repeat 10px 14px #f9f9f8;
line-height:34px;
padding:0px 25px 0px 25px;
font-size:14px;
color:#5195aa;
border:none;
box-shadow: 3px 2px 2px #848382;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=2, Color=#848382); /*** Drop Shadow for IE 8 ***/
}
.menu_navigation ul li a, .footer-nav li a, .text-nav li a {
color:#717070;
}
</style>


No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...