Проблема с выпадающим меню Pure CSS в IE 6 и 7

Question

У меня есть чистое меню css с выпадающими списками, в IE8 и FF оно прекрасно работает, но в режиме совместимости для IE7 и IE6 оно не работает.

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

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

Но вот код.Сначала меню.

<ul id="menu">
<li><a href="***.php" title="Unihost Web Hosting Home Page">Home</a></li>
<li><a href="#">Company</a>
<ul>
<li><a href="***.php" title="About Unihost">About us</a></li>
<li><a href="***.php" title="We're going green, are you?">Going Green</a></li>
<li><a href="***.php" title="Unihost Privacy Policy">Privacy policy</a></li>

<li><a href="***.php" title="Unihost Terms and Conditions">Terms and conditions</a></li>    
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="***.php" title="Register a domain with us" target="_blank">Domain Registrations</a></li>    
<li><a href="***.php" title="PHP Web hosting packages">PHP Web Hosting Packages</a></li>
<li><a href="***.php" title="Our E-mail hosting packages">Email Hosting Packages</a></li>

</ul>
</li>
<li><a href="">Contact us</a>
<ul>
<li><a href="***.php" title="Contact support" target="_blank">Support</a></li>
<li><a href="***.php" title="Pre-sales Questions" target="_blank">Pre-sales Questions</a></li>
</ul>

</li>
<li><a href="">Client Area</a>
<ul>
<li><a href="***.php" target="_blank">Register</a></li>
<li><a href="***.php " target="_blank">Login</a></li>
<li><a href="***" target="_blank">Client Area</a></li>
<li><a href="***" target="_blank">Knowledgebase</a></li>

<li><a href="***" target="_blank">Help Ticket System</a></li>
</ul>
</li>  
</ul>

Css Второе меню

ul {
font-family:Verdana, Geneva, sans-serif, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:700;
list-style:none;
float:right;
margin:0;
padding:0;
}

ul li {
display:block;
position:relative;
float:left;
border-right:1px solid #ccc;
}

li ul {
display:none;
}

ul li a {
display:block;
text-decoration:none;
color:#c00;
border-top:1px solid #ededed;
background:#ededed;
margin-left:1px;
white-space:nowrap;
text-transform:uppercase;
padding:8px 15px;
}

ul li a:hover {
background:#c00;
color:#fff;
}

li:hover ul {
display:block;
position:absolute;
border-right:0;
}

li:hover li {
float:none;
font-size:11px;
border-right:0;
}

li:hover a {
background:#444;
color:#fff;
border-top:1px solid #555;
border-right:0;
text-align:left;
}

li:hover li a:hover {
background:#dedede;
color:#c00;
border-right:0;
}

Любая помощь будет оценена.Заранее спасибо.

Answer 1

Чистые меню CSS имеют ряд проблем, в том числе проблему диагонали .Я бы предложил перейти на Javascript - это должно решить проблему совместимости браузера и сделать меню более удобным.

Если вы используете jQuery, я рекомендую Superfish .

Answer 2

У вас есть несколько опций для того, чтобы заставить меню работать в IE6.Похоже, вы используете режим совместимости в IE8 для тестирования - это определенно не аналогично тому, как на самом деле используется IE6 для просмотра сайта.

Что касается простого раскрывающегося списка CSS для работы в IE6, топростой ответ: вы не можете, потому что IE6 не распознает псевдокласс :hover ни на чем, кроме <a>.

IE7.js - фантастический JSБиблиотека, которая исправляет ошибки CSS и добавляет неподдерживаемые функции в более старые версии IE, стоит посмотреть.

Вы также можете помочь своим пользователям выполнить обновление, внедрив Pushup, который вы можете найти на pushuptheweb.com (извините, могу опубликовать только 1 ссылку).

Если честно, вам действительно следует поступить так, как предложил другой автор, и убрать таблицы из разметки.Это очень устаревшая техника верстки, которую можно заменить очень небольшим количеством семантического HTML и CSS.

Answer 3

Насколько я знаю, вам придется прибегнуть к JavaScript, чтобы ваше меню работало в IE6. Я написал статью о мгновенном сдвиге, на которую вы могли бы взглянуть:

• Создание простого выпадающего меню с помощью jQuery

Answer 4

Во-первых, IE6 мертв, IE6 Похороны

Во-вторых, для IE7 вам, возможно, придется ввести z-index в вас ul и обернуть ваше изображение div ипоместите z-index на это.Z-индекс ul должен быть выше, чем z-индекс div, который вы оборачиваете своим изображением.