Страница не распознает мои стили

Question

У вас есть идеи, почему sass не распознает ребенка и вместо этого создает новый блок?

HTML:

<div class="menu_inside"> 
    <a href="#" class="menu_link">Map</a> 
    <a href="#" class="menu_link">Users (8/39)</a> 
    <a href="#" class="menu_link">Events</a> 
    <a href="#" class="menu_link" id="menu_content">Content 
     <div class="menu_div_dropdown"> 
      <a>sdfsd</a> 
     </div> 
    </a> 
    <a href="#" class="menu_link">Setup</a> 
    <a href="#" class="menu_link">Logs</a> 
</div> 

CSS:

.menu_inside { 
    float: right; 
    text-align: center; 
} 
.menu_inside .menu_link { 
    color: #353434; 
    font-size: 11px; 
    border-right: 1px #cecccc solid; 
    float: left; 
    min-width: 53px; 
    padding: 10px 20px 9px 20px; 
} 
.menu_inside .menu_link:first-child { 
    border-left: 1px #cecccc solid; 
} 
.menu_inside .menu_link:hover { 
    background-color: #FFF; 
} 
.menu_inside #menu_content .menu_div_dropdown { 
    display: none; 
    position: absolute; 
} 
.menu_inside #menu_content:hover .menu_div_dropdown { 
    display: block; 
} 

Я проверил на осмотр элемента на хроме, и это показывает, что моя sdfsd в новом блоке, но не в качестве содержания ребенка , Если я удалю a из sdfsd, он показывает все в порядке. Есть идеи? Спасибо

Answer 1

Вы не можете иметь div внутри метки привязки ... Элемент block внутри встроенного элемента семантически некорректен. Кроме того, у вас есть якорный тег в теге привязки. Также семантически неправильно. Либо сделайте div span и удалите внутренний якорь, либо перепишите код на что-то еще.

UPDATE Я исправлюсь для HTML5 ...

HTML 5 говорится, что <a> элемент «может быть обернуты вокруг целые абзацы, списки, таблицы и т.д., даже целые разделы, так если в интерактивном содержимом нет (например, кнопок или других ссылок) ».

Но ваш код по-прежнему ошибочен в связи с тем, что у вас есть ссылка в другой ссылке. Вам все равно нужно это исправить.