Хорошо, я работал над созданием выпадающего меню, которое хорошо работало на Google Chrome.Недавно я расширился, чтобы проверить сайт в Opera, Firefox и Safari.
Safari выглядит идентично Chrome, но Opera и Firefox показывают «скрытый» текст моего выпадающего меню.Opera, похоже, вообще не регистрирует заполнение, но мой вопрос:
Q: Какой элемент не отображается в Firefox так же, как в Chrome и Safari?
Я скрываю свое меню, устанавливая высоту, равную 0 пикселей, а затем при наведении курсора на 30 пикселей.Я выбираю этот способ, так как его можно переключать, чтобы меню двигалось вверх и вниз.
HTML:
<nav>
<ul>
<li><a href="services.html" class="glow">Services</a>
<ul>
<li><a href="researchDevelopment.html" class="glow">Research & Development</a></li>
<li><a href="designAudit.html" class="glow">Design Auditing</a></li>
<li><a href="training.html" class="glow">Training</a></li>
<li><a href="licensing.html" class="glow">Licensing</a></li>
<li><a href="troubleshooting.html" class="glow">Troubleshooting & Performance Analysis</a></li>
</ul>
</li>
<li><a href="pageTemplate.html" class="glow">Products</a></li>
<li><a href="pageTemplate.html" class="glow">Training</a></li>
<li><a href="pageTemplate.html" class="glow">Technology</a></li>
<li><a href="pageTemplate.html" class="glow">Clients</a></li>
<li><a href="publications.html" class="glow">Publications</a></li>
<li><a href="pageTemplate.html" class="glow">Contact Us</a></li>
</ul>
</nav>
CSS:
/*--- Nav Bar ---*/
nav { float: left; margin: 4px 0 0 137px; }
nav li { list-style: none; float: left; width: 113px; height: 56px; text-align: center; position: relative; }
nav li:hover { background: url(images/buttonSprite.png) 0 -90px; }
nav a { display: block; width: 113px; height: 37px; }
nav a:link { padding-top: 19px; }
/*--- Creates a delayed glowing effect on the links on hover. ---*/
nav a.glow, nav a.glow:hover, nav a.glow:focus { text-shadow: none; -webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s; outline: 0 none; }
nav a.glow:hover, nav a.glow:focus { color: #fff; text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; }
/*--- Drop Down Functionality. ---*/
nav li ul { list-style: none; height: 0px;}
nav li ul li, nav li ul li a { height: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; tranistion: all 0.2s ease-in-out; }
nav li ul li { float: none; width: 263px; background: url(images/buttonSprite.png) 0 -30px; }
nav li ul a:link { display: block; white-space: nowrap; padding-top: 0px; width: 100%; margin: -10px 0 0 0; }
/*--- Show drop-down on hover. ---*/
nav li:hover ul li { height: 30px; }
nav li:hover ul a:link { padding-top: 6px; width: 100%; height: 100%; margin: 0 0 0 0; }
nav li ul li:hover{ background: url(images/buttonSprite.png) 0 -60px; }
Выпадающее «subMenu» содержится в виде неупорядоченного списка в элементе родительского списка.После игры с кодом я обнаружил, что установка
nav li ul li { display: block }
заставит Chrome и Safari также показать текст.Как помощник, вот фотографии того, о чем я говорю.
Хром: Что я хочу:
Firefox: Не так уж много:
Меню выключено, работает во всех протестированных браузерах:
Заранее спасибо.И еще, я совсем новичок в этом, поэтому, если есть соглашения о форматировании или ненужный код, пожалуйста, дайте мне знать, чтобы я мог написать лучший код.Я взял стиль форматирования CSS из таблиц стилей Apple.com, так как он выглядит немного лучше, чем стиль
itemReference {
attribute: setting;
}