Проблемы с выпадающим меню CSS, z-index, iframe?

0

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

http://jsfiddle.net/8Xu7E/1/

body {
    background-color:#FFFFFF;   

}

a:visited {
    color:orange;

}

#wrapper {
    width:900px; margin:0px auto; background-color:#EEEEEE; 

}

#top { width:100%;  background-color:black; overflow:hidden;

}


#logo {     float:left; margin: 0 0 0 10px; 

}

#socialmedia { float:right; padding:0 10px 0 0; 

}

#socialmedia img {
            height:24px; width:24px; 
}

#socialmedia p {
     color:white;
}


#topnav {   clear:both; background-color:#444444;

            padding-top:0.001em;        
            padding-bottom:0.001em;

}

#content {

    background-color:red; width:100%; padding-top:0.001em; 
    height:700px;

}


/*menu*/

ul li{
    display:inline-block;
}

ul ul {
    display:none;

}

ul li:hover > ul {
        display: block;


    }

/*iframe same size as content div*/ 
iframe {


    width:100%;
    height:100%; 
}   
Теги:
iframe

1 ответ

0

Вам нужно вставить свои внутренние меню в родительский тег "li", чтобы он выглядел так:

<ul>Main menu
<li>Dropdown menu
  <ul>
    <li>Dropdown child</li>
  </ul>
</li>
</ul>

Теперь у вас есть это:

<ul>Main menu
<li>Dropdown menu</li>
  <ul>
    <li>Dropdown child</li>
  </ul> 
</ul>

И вы также можете добавить положение: абсолютное к вашему внутреннему меню ul, чтобы он мог рисовать выше всего остального.

ul li:hover > ul {
        display: block;
        position: absolute; 

    }

Проверьте скрипку здесь http://jsfiddle.net/8Xu7E/3/ (Это настройка только для первого пункта меню, пока)

Обновленная скрипка с каждым рабочим меню: http://jsfiddle.net/8Xu7E/5/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню