CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnav
Jono20201
Jono20201

Reputation: 3205

Bootstrap 3 Horizontal Nav adding anchor

Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.

Code:

<li class='submenu'>
<a href='#'>
     <img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
         <ul class='nav'>
    <li><a href='#'>abc</a></li>
    <li><a href='#'>abc</a></li>
    <li><a href='#'>abc</a></li>
    <li><a href='#'>abc</a></li>
     </ul>
</a>                    
</li>

What Chromes Inspector says:

<li class="submenu">
<a href="#">
    <img src="https://xxxxxx/img/menu/performance.png"> Performance

    </a>
    <ul class="nav" style="display: block;"><a href="#">
        </a><li><a href="#"></a><a ref="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
    </ul>
</li>

Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:

.left-nav .submenu li:nth-child(2) > a:first-child {
     display:none;
}

Upvotes: 0

Views: 461

Answers (2)

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

You should not have any links inside another link. This is not valid HTML.

If the browser encounters a link tag while already inside a link tag it will add the closing tag for the first link.

Upvotes: 4

Jono20201
Jono20201

Reputation: 3205

I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.

Upvotes: 1

Related Questions