Проблема с выпадающим меню IE Css - PullRequest
Новая
       1

Проблема с выпадающим меню IE Css

0 голосов
/ 21 января 2011

Таким образом, у меня есть проблема с раскрывающимся меню CSS, отображаемым неправильно в IE.В других браузерах это работает так, как должно. 

    <body>
<div id="container">
    <header>        
        <div id="hlogo">
            <a href="index.html">title</a>
        </div>
        <nav id="hmenu">
            <ul>
                <li>
                    <a href="menu1.html">menu1</a>
                </li>
                <li>
                    <a href ="menu2.html">menu2</a>
                    <div id="items" class="hiddenMenu">
                        <a href="submenu1.html">submenu1</a>
                        <a href="submenu2.html">submenu2</a>
                        <a href="submenu3.html">submenu3</a>
                        <a href="submenu4.html">submenu4</a>
                    </div>
                </li>
                <li>
                    <a  href ="menu3.html">menu3</a>
                </li>
                <li>
                    <a  href ="menu4.html">menu4</a>
                </li>
            </ul>
            </nav>
    </header>

    <section id="container-body">
        <div id="content">



        </div>
    </section>
</div>

Так что это мой полный HTML.Он имеет макет, представленный следующим css. 

    /* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}

footer {
    display:block;
    position:relative;
    width:100%;
}
footer > #disclamer {

    margin-left: auto;
    margin-right: auto;
    width: 200px;
    padding-bottom:5px;
    font-size:small;
    font-weight: bold;
}
#container{
    background-color:#ffffff;
    margin:auto;
    min-width:756px;
    width:60%;
    overflow:hidden;
    border:solid 2px #666666;
    margin-top:10px;
    margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.6);
}

#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}

#hmenu{margin-top:45px;padding:10px;}

nav {
    list-style:none;
    display:inline;
    float:right;
}
nav ul{
    list-style: none;
    text-align:center;
    background-color:#666666;
    float:left;

}
nav ul li {
    width:128px;
    float:left;
    display:inline-block;
}
nav ul li:hover{
    background-color:#cc3333;
    cursor:pointer;
}
nav ul li a {
    color:#ffffff;
    padding:10px;
}

nav ul {
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor: pointer
}

section {margin:10px;}

#container > header {display:block;}

#container-body {
    background-color:#ececec;
    height:600px;
    display:block;
    overflow:auto;
}

#container-body  > #content {
    margin: 10px;
    height:95%;
    position:relative;
}
    .hiddenMenu 
{
    position:absolute;
    z-index: 150;
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor: pointer;
    width: inherit;
}
.hiddenMenu > a
{
    position:relative;
    text-align: left;
    clear:both; 
    font-size:0.75em;   
}


nav li .hiddenMenu > a
{
    display:none;
}
/*nav li:hover .hiddenMenu  > a
{
    display:block;
}*/

nav li .hiddenMenu  > a:hover
{
    background-color:#cc3333;   
    cursor:pointer;
    border: 1px black solid;
}

Это полный CSS.

Это CSS, который я использую.Теперь в Firefox все работает как надо.Меню отображается при наведении курсора на пункт меню2.В IE он показывает первый элемент подменю (submenu1), а затем очищается, поэтому я даже не могу щелкнуть по нему.

Я не вижу, что я делаю неправильно, поэтому, если вы можете мне помочь, я был бы признателен.Спасибо!

edit: добавлен код.

Тег заголовка имеет переполнение: скрытый атрибут;если я установлю это на видимое, оно покажет полное меню, но полностью испортит мой макет.Есть ли способ обойти это или я делаю что-то не так?

Кроме того, у меня есть скрипт jquery для установки отображения в меню соответственно на none / block, но в IE, если я наведите курсор на элементы подменювсе еще будет скрыт.Почему это происходит?

Ответы [ 2 ]

3 голосов
/ 21 января 2011

По моему опыту, IE немного глючит, когда вы не устанавливаете положение объекта с абсолютным позиционированием. Например, top: 0 и left: 0.

Edit: Кроме того, родительский объект объекта с абсолютным позиционированием должен иметь позицию: относительный; если позиция должна использовать родительские размеры в качестве отправной точки.

Edit2: li: hover не работает в IE6, я думаю. Не могу вспомнить о IE7. Один из них будет принимать только: hover, а браузеры ниже, возможно, ни один из них. JQuery решает подобные вещи, хотя.

Edit3: Я не знаю, что такое навигация, я не перешел на HTML5, поэтому не знаю, актуально ли это позже. Но в любом случае я сделал кое-что, что работает из твоего кода.

Сценарий (jquery): 

$(document).ready(function () { 
  $('#hmenu ul li').hover(function () { 
    $(this).children('div').css('display', 'block'); 
  }, 
  function () { 
    $(this).children('div').css('display', 'none'); 
  }); 
});

CSS: 

#hmenu {
    list-style: none;
    display: inline;
    float: right;
}

#hmenu ul {
    list-style: none;
    text-align: center;
    background-color: #666666;
    float: left;
}

#hmenu ul li {
    width: 128px;
    float: left;
    position: relative;
    display: inline-block;
}

#hmenu ul li:hover {
    background-color: #cc3333;
    cursor: pointer;
}

#hmenu ul li a {
    color: #ffffff;
    padding: 10px;
}

#hmenu ul {
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer
}

.hiddenMenu {
    display: none;
    position: absolute;
    top: 60;
    left: 0;
    z-index: 150;
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    width: inherit;
}

(извините за форматирование, немного нового для этого, но вы можете применить форматирование исходного кода в вашем редакторе, я думаю. Я изменил navs, чтобы иметь id, и изменил HTML nav, чтобы он был div.

HTML: 

<div id="hmenu">
    <ul>
        <li>
            <a href="menu1.html">menu1</a>
        </li>
        <li>
            <a href="menu2.html">menu2</a>
            <div id="items" class="hiddenMenu">
                <a href="submenu1.html">submenu1</a>
                <a href="submenu2.html">submenu2</a>
                <a href="submenu3.html">submenu3</a>
                <a href="submenu4.html">submenu4</a>
            </div>
        </li>
        <li>
            <a href="menu3.html">menu3</a>
        </li>
        <li>
            <a href="menu4.html">menu4</a>
        </li>
    </ul>
</div>
1 голос
/ 21 января 2011

У вас не может быть тега с именем nav , измените его на div и повторите попытку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...