Seeking a way to center an arrow graphic under the selected item in a simple CSS drop-down menu? Considering using the :after selector, but currently being used for drawing dividing lines between menu options:
HTML:
<ul>
<li>Option Zero</li>
<li>Option One Is Longer</li>
<li class='selected'>Option Two
<ul class='sub-menu'>
<li>Sub One</li>
</ul>
</li>
<li>Option Three Is Not the Best</li>
</ul>
<div class='arrowholder'>
<div class='arrow'></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list - style: none;
width: 100 % ;
background: red;
height: 50px;
padding: 10px 10px 0 10px;
margin: 0px;
}
li {
float: left;
margin - top: 10px;
}
li: after {
content: "|";
margin: 0 8px;
}.sub - menu {
display: none;
}
.arrowholder {
clear: both;
width: 100 % ;
background: green;
height: 50px;
}
.arrow {
width: 50px;
height: 50px;
background: url(http: //upload.wikimedia.org/wikipedia/en/1/1c/Up_Arrow_Icon.png) no-repeat;border:solid 1px white;
}
JSFiddle: http://jsfiddle.net/pnoeric/MrW58/2/
Already have a jQuery-based solution implemented (seen on the fiddle), but facing cross-browser compatibility issues due to different return values from position() method in Chrome vs Firefox.
UPDATE: jQuery-based solution works perfectly without the Chrome JavaScript Console open. The position() method returns strange values when the console is open, requiring it to be closed for accurate results.
Preferably seeking a 100% CSS solution or alternatively, one that includes some jQuery support. How can this be achieved?