Проблема с таргетингом на CSS3

первый вопрос здесь, пожалуйста, пройдите ко мне :).Проблема с таргетингом на CSS3

Я начал изучать css3 две недели назад, и теперь я пытаюсь создать чистую систему выпадающего меню css3. я получил мое меню построено как этого

<body> 
     <div id="column"> 
      <div id="header"> 
       <heading1>Header.</heading1> 
      </div> 

      <div id="menu"> 
       <a href="Home.html"><menu-element class="chosen"> Home page</menu-element></a> 
       <a href="Project.html"><menu-element>Project</menu-element></a> 
       <a href="Gallery.html"> 
        <menu-element> Gallery 
         <ul> 
          <li>1</li> 
          <li>2</li> 
         </ul> 
        </menu-element> 
       </a> 

      </div> 
.... 
</body>

Я работаю по интеграции CSS кода я учился на учебник, чтобы работать на моей структуру CSS. Шаг, который у меня возник из-за проблемы, является первым: скрытие элементов подменю, когда он не находится на мыши.

Я попытался с

menu-element ul 
{ 
    display: none; 
}

скрыть только уль элементы, вложенные в меню-элемента элементов, но он не работает .. и уль и ее Ли Чайлдс являются все еще там. Может ли кто-нибудь помочь мне, сообщив мне, где я ошибаюсь?

источник

2014-02-25 Cappuccio

Что такое 'heading1' и' menu-element'?Это не допустимые HTML-элементы, поэтому я подозреваю, что CSS тоже не понимает их. – gpgekko

Просто используйте основную структуру 'nav/ul/li/a', как и все остальные ... пожалуйста! Вот один из них, который я поддерживаю для справки: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294 –

Люди, как я уже говорил ниже, я знаю, что я использую наименование неортодоксальной структуры элементов, но я не понимаю, почему должен ограничивать эффекты css на них. – Cappuccio

Я думаю, что вы делаете свои тесты в IE и в некоторых старых режимах совместимости.

В Chrome, Firefox и IE 11, ваш код работает фрагмент

fiddle

код, чтобы сделать так счастлив:

menu-element ul 
{ 
    display: none; 
}

Chrome dev tools

Это правда, что элементы не являются допустимыми типами HTML (и, конечно же, вы должны использовать действительные!), но браузер, совместимый с HTML5, довольно либеральен относительно t шапка.

источник

2014-02-25 16:56:47 vals

Ваша единственная проблема в том, что у вас есть недопустимые теги html, (<menu-element> и <heading1>).

Вместо <menu-element><nav>, а вместо <heading1> использовать <h1>.

источник

2014-02-25 15:16:56 PixelAcorn

Когда сделал '

' стал элементом ...? Возможно, вы имели в виду '

@Paulie_D

Элемент

был устаревшим в HTML 4.01. –

Лучшей практикой создания навигационных меню является использование неупорядоченного списка для всего меню. Таким образом, если стили не загружены (по какой-либо причине), они все еще читаются правильно. Как отмечали другие, и являются недопустимыми тегами.

Я предложил бы использовать модель ниже:

<nav> 
    <ul> 
     <li><a href="Home.html">Home</a></li> 
     <li><a href="Project.html">Project</a></li> 
     <li> 
      <a href="Gallery.html">Gallery</a> 
      <ul class="gallery"> 
       <li>1</li> 
       <li>2</li> 
      </ul> 
     </li> 
    </ul> 
</nav>

И для CSS вы можете использовать

ul.gallery{ 
    display: none; 
}

или

nav ul li ul{ 
    display: none; 
}

Я использую второй вариант при создании чистого CSS выпадающие меню, поскольку вам легче следовать, создавая более сложные меню. Он также позволяет скрывать все подменю, а не только те, которые принадлежат классу галереи.

источник

2014-02-25 17:13:39 clancimus

Проблема с таргетингом на CSS3

ответ

Смежные вопросы