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