Dropdowns use invalid markup about concise.css HOT 4 CLOSED

You can replace span with div

<div class="dropdown">Dropdown
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</div>

or maybe better:

<div class="dropdown">
  <span>Dropdown</span>
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</div>

from concise.css.

@jameskolce thank you, that does the job for me.

The main reason I was validating my code was due to an odd IE9/10 error, I was hoping this would fix it, but it hasn't.

View this page in iE9 or IE10: https://www.acaudio.co.uk/brands/mackie/speakers/studio-monitors-779/index.asp

The drop downs (Sort Options and Page Options) work when you click on them, which is good, but now hover just below them over the image, notice the dropdown hover state changes. You can click on them whilst the hover state is active and the menu shows. This doesn't happen on IE8 or IE11, or any other browser.

I have been trying to fix this for a while and can't figure it out. Don't suppose you have any ideas?

Cheers,

Steve

from concise.css.

My current fix stops the transition effect from working:

.dropdown .dropdown-menu {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   
    filter: alpha(opacity=0);
    display: none;
}
.dropdown.dropdown-active .dropdown-menu {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    display: block;
}

from concise.css.

Everything works for me in IE9
Could you post a screenshot about the problem please?

from concise.css.