Error The element button must not appear as a descendant of the a element. Options

[ebu]

Hi all,
I get an error in validator saying:
Element div not allowed as child of element ul in this context
the code for that is:

CODE

<div id="header">
            <img src="image/logoCake.png" alt="A Touch of Magic Logo" />
            <div id="nav">
                <ul><li class="a"><a href="index.html">Home</a></li>
                    <li class="a"><a href="aboutme.html">About Me</a></li>
                    <li class="a"><a href="contact.html">Contact Me</a></li>
                    <div class="dropdown"><!--Dropdown Menu-->
                        <button class="dropbtn">Cakes</button>
                        <div class="dropdown-content">
                            <a href="signature.html">Signature</a>
                            <a href="iced.html">Iced Collection</a>
                            <a href="birthday.html">Birthday</a>
                            <a href="christening.html">Christening</a>
                            <a href="children.html">Children</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn">Booking Form</button>
                        <div class="dropdown-content">
                            <a href="wedding booking form.pdf">Wedding Booking Form</a>
                            <a href="booking form.pdf">General Booking Form</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn">Flavours &amp; Fillings</button>
                        <div class="dropdown-content">
                            <a href="weddingFlavours.html">Wedding</a>
                            <a href="occasional.html">Occasional</a>
                        </div>
                    </div>
                </ul>
            </div>
        </div>

so I tried to put my <ul> list items all together and then the buttons with the drop down but then my navbar is in two lines, one for list items and second one for buttons.

so i tried this:

CODE

<div id="header">
            <img src="image/logoCake.png" alt="A Touch of Magic Logo" />
            <div id="nav">
                <a href="index.html"><button class="dropbtn">Home</button></a>
                    <a href="aboutme.html"><button class="dropbtn">About Me</button></a>
                    <a href="contact.html"><button class="dropbtn">Contact Me</button></a>
                    <div class="dropdown"><!--Dropdown Menu-->
                        <button class="dropbtn">Cakes</button>
                        <div class="dropdown-content">
                            <a href="signature.html">Signature</a>
                            <a href="iced.html">Iced Collection</a>
                            <a href="birthday.html">Birthday</a>
                            <a href="christening.html">Christening</a>
                            <a href="children.html">Children</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn">Booking Form</button>
                        <div class="dropdown-content">
                            <a href="weddingbookingform.pdf">Wedding Booking Form</a>
                            <a href="bookingform.pdf">General Booking Form</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn">Flavours &amp; Fillings</button>
                        <div class="dropdown-content">
                            <a href="weddingFlavours.html">Wedding</a>
                            <a href="occasional.html">Occasional</a>
                        </div>
                    </div>

            </div>
        

but then I still get en error:
The element button must not appear as a descendant of the a

and if I do opposite

CODE

<button class="dropbtn"><a href="index.html">Home</a></button>

still an error: The element a must not appear as a descendant of the button element.

So finally the question is: how can i make a button be a link or how do i cheat validator to not give me an error?

[pandy]

Can't you just close the UL after the list?

CODE

<div id="nav">
   <ul>
      <li class="a"><a href="index.html">Home</a></li>
      <li class="a"><a href="aboutme.html">About Me</a></li>
      <li class="a"><a href="contact.html">Contact Me</a></li>
   </ul>
</div>

<div class="dropdown"><!--Dropdown Menu-->
   <button class="dropbtn">Booking Form</button>
   <div class="dropdown-content">
      <a href="wedding booking form.pdf">Wedding Booking Form</a>
      <a href="booking form.pdf">General Booking Form</a>
   </div>
</div>
<div class="dropdown">
   <button class="dropbtn">Flavours &amp; Fillings</button>
   <div class="dropdown-content">
      <a href="weddingFlavours.html">Wedding</a>
      <a href="occasional.html">Occasional</a>
   </div>
</div>

[Frederiek]

Actually, where do these dropdown menus refer to? They drop down from what?

See an example of such menus at http://codepen.io/philhoyt/pen/ujHzd .

[ebu]

I tried that pandy but then the 3 list items are in one row and the other 3 (buttons) are in a second row,

[ebu]

I took the drop down menu from w3schools. I finally manged to fix it by just simply styling links the same way as the buttons

CODE

<a href="index.html" class="dropbtn">Home</a>

Thanks for you replies

[Christian J]

I tried that pandy but then the 3 list items are in one row and the other 3 (buttons) are in a second row,

How about putting each <div class="dropdown"> in an LI of its own?

CODE

<ul>
<li class="a"><a href="index.html">Home</a></li>
<li class="a"><a href="aboutme.html">About Me</a></li>
<li class="a"><a href="contact.html">Contact Me</a></li>
<li><div class="dropdown"><!--Dropdown Menu-->
    <button class="dropbtn">Cakes</button>
    <div class="dropdown-content">
    <a href="signature.html">Signature</a>
    <a href="iced.html">Iced Collection</a>
    <a href="birthday.html">Birthday</a>
    <a href="christening.html">Christening</a>
    <a href="children.html">Children</a>
    </div>
</div></li>
<li><div class="dropdown">
    <button class="dropbtn">Booking Form</button>
    <div class="dropdown-content">
    <a href="wedding booking form.pdf">Wedding Booking Form</a>
    <a href="booking form.pdf">General Booking Form</a>
    </div>
</div></li>
<li><div class="dropdown">
    <button class="dropbtn">Flavours &amp; Fillings</button>
    <div class="dropdown-content">
    <a href="weddingFlavours.html">Wedding</a>
    <a href="occasional.html">Occasional</a>
    </div>
</div></li>
</ul>

[pandy]

I tried that pandy but then the 3 list items are in one row and the other 3 (buttons) are in a second row,

How do you mean? The only difference is that what comes after the list isn't indented. Possibly you use some CSS that doesn't work when the HTML change, but the raw HTML looks the same except the indention.

Yours is above the HR and mine is below. I missed a bit I see, but never mind.