Question

My drop down menu works perfect in XML and not in HTML. Please view this fiddle for a visual presentation: http://jsfiddle.net/H8FVE/9/
If you hover your mouse over the MORE button, you will see that the drop down aligns fine. The code I use for the drop down bit is:

<moretopbar>
<ul>
    <li class="mgames"><a href="" style="border-bottom:9px solid #e34328">Games</a></li>
    <li class="mliterature"><a href="" style="border-bottom:9px solid #2c8f83">Literature</a></li>
    <li class="marts"><a href="" style="border-bottom:9px solid #cc226a">Arts</a></li>
    <li class="mcontact" style="background:none;"><a href="" style="border-bottom:9px solid #9395aa">Contact</a></li>
</ul>
</moretopbar>

And some CSS:

#mega div moretopbar {
    clear: both;
    float: left;
    position: relative;
    margin-left:1px;
    margin-right:1px;
    width: 495px;
    height: 74px;
    background-image: url(images/morebgwide.png);
    background-size:495px 74px;
    background-repeat:no-repeat;
}

I tried to change the <moretopbar> to <div id="moretopbar"> but it messed up the drop down completely.

Why is that? And how should I fix it so that I use HTML only? Feel free to update the fiddle if you choose to answer: http://jsfiddle.net/H8FVE/9/

Before you choose to answer I should note two things. Firstly, I am not familiar with XML, the above is a coding mistake that randomly worked for me (and someone pointed out it was XML), and secondly, is there a reason of why I shouldn’t use it this way? For instance compatibility issues…

Answer 1

Your HTML is totally invalid. You are opening a lot of divs and not closing them all. That is why your design breaks when you introduce one more div.

Please fix your HTML. You can use W3c’s Online Validator to see problems with your markup. Make writing valid HTML your habit, otherwise expect to get “strange” errors like this.

In this fiddle, I made the following changes:

• Moved the ID to your <ul> and got rid of <moretopbar>:

  <ul id="moretopbar">
  

• Changed the selector to: #mega div #moretopbar.

It “works” because the ID is now on an ul, not a div – as I already mentioned, the browser cannot really identify which div is which because of the lack of closing tags. Unless you fix this problem you are very very likely to see other strange bugs with your current divs.

---

Edit: Also the following CSS rules need to be more specific than simply saying div:

#mega div {...}
#mega li.dif:hover div {...}

For example you can use a specialdiv class on the div you mean these rules for, and use .specialdiv instead of div in the rules.

Working jsFiddle Demo