Child-only alternative in Internet Explorer 8
I created a CSS menu that looks like this jsfiddle .
Used CSS classes.
#main_nav {
margin-top:15px
}
#main_nav ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
background: #888;
}
#main_nav ul a {
display:block;
text-decoration:none;
font-size:12px;
line-height:32px;
padding:0 15px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}
#main_nav ul li {
position:relative;
float:left;
margin:0;
padding:0
}
#main_nav ul li.current-menu-item {
background:#ddd
}
#main_nav ul li:hover {
background: #008000
}
#main_nav ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#888;
padding:0
}
#main_nav ul ul li {
float:none;
width:200px;
}
#main_nav ul ul a {
line-height:120%;
padding:10px 15px
}
#main_nav ul ul ul {
top:0;
left:100%
}
#main_nav ul li:hover > ul {
display:block
}
.menu li > a:after { margin-left: 5px; float: right; content: '\25BA'; }
.menu > li > a:after { margin-left: 5px; float: right; content: '\25BC'; }
.menu li > a:only-child:after { margin-left: 0; content: ''; }
<div id="main_nav">
<ul class="menu">
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li class="dir"><a href="#">Sub Menu 1</a></li>
<li class="dir"><a href="#">Sub Menu 2</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
</div>
a:only-child:after
in this CSS does not work in Internet Explorer (8). Hence, an arrow appears in every menu item, including those without submenus.
Is there an alternative a:only-child:after
in Internet Explorer 8?
source to share
I couldn't find another pseudo selector that could act in this case instead :only-child
. I've tried to work with some sibilings selectors but with no success.
A possible solution would be to "poke fun" only-child
with jQuery. JQuery supports most css aliases, regardless of browser. You could be something like this:
$(document).ready(function() {
$("a:only-child").addClass("only-child");
});
Setting a class .only-child
for each a
to match the pseudo. Then change the css rule to:
.menu li > a.only-child:after {
Working fiddle: http://jsfiddle.net/xgjhk0kw/2/
source to share