.inner-nav {
float: left;
display: block;
width: 300px;
position: relative;
z-index: 50;
z-index: 1;
}
.inner-nav li {
padding: 0 !important;
float: left;
display: block;
height: 42px;
width: 100%;
margin: 0 0 1px;
font-size: 14px;
font-weight: 600;
line-height: 42px;
text-shadow: 0 1px 1px rgba(0,0,0,0.15);
background: rgb(193,182,174);
background: -moz-linear-gradient(top, rgba(193,182,174,1) 0%, rgba(186,172,163,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(193,182,174,1)), color-stop(100%,rgba(186,172,163,1)));
background: -webkit-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
background: -o-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
background: -ms-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
background: linear-gradient(to bottom, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1b6ae', endColorstr='#baaca3',GradientType=0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.inner-nav li {
background: rgb(240,192,96);
background: -moz-linear-gradient(top, rgba(240,192,96,1) 0%, rgba(240,216,144,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,192,96,1,1)), color-stop(100%,rgba(240,216,144,1)));
background: -webkit-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
background: -o-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
background: -ms-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
background: linear-gradient(to bottom, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0C060', endColorstr='#F0D890',GradientType=0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.inner-nav li i {
position: absolute;
left: 0;
font-size: 22px;
padding: 10px 0 0 15px;
color: #ffffff;
height: 42px;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.inner-nav li a {
float: left;
display: block;
color: #fff;
padding: 0 0 0 41px;
width: 100%;
height: 100%;
position: relative;
font-weight: 600;
}
.inner-nav li a {
padding-left: 45px !important;
}
.inner-nav .description a:before {
content: "\e88f";
}
.inner-nav li a:before {
font-family: 'Material Icons';
font-size: 24px;
font-weight: 400;
position: absolute;
top: 0;
left: 10px;
}
.inner-nav li.active, .inner-nav li.active:hover, .inner-nav li.current-menu-item, .inner-nav li.current-menu-item:hover {
background: rgb(91,181,200);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(91,181,200,1) 0%, rgba(62,165,187,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,181,200,1)), color-stop(100%,rgba(62,165,187,1)));
background: -webkit-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
background: -o-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
background: -ms-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
background: linear-gradient(to bottom, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb5c8', endColorstr='#3ea5bb',GradientType=0);
width: 110%;
}
.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after {
content: "";
position: absolute;
top: 0;
right: 3px;
width: 42px;
height: 42px;
/* border-style: solid; */
/* border-width: 21px 0 21px 21px; */
}
.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after {
position: absolute;
top: 6px;
right: 30px;
width: 30px;
height: 30px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
background: linear-gradient(45deg, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
}
<nav class="inner-nav">
<ul>
<li class="description active" id=""><i class="fa fa-info-circle"></i><a href="#description" title="Description">Description</a></li><li class="facilities" id=""><i class="fa fa-tasks"></i><a href="#facilities" title="Facilities">Facilities</a></li><li class="availability" id=""><i class="fa fa-clock-o"></i><a href="#availability" title="Availability">Availability</a></li> <li class="pricing">
<i class="fa fa-gbp"></i><a href="#pricing" title="Pricing">Pricing</a>
</li>
</ul>
</nav>
使用SVG ...はるかに簡単。 –