Выпадающее меню, появляющееся за div

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

У меня возникла проблема, когда я попытался использовать раскрывающееся меню на моем макете.

Меню опускается вниз, но часть его скрыта за div, которая находится ниже строки меню.

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

Если я удаляю фоновый цвет из #main div, вы можете увидеть оставшуюся часть выпадающего списка, но вы не можете на самом деле нажимать на ссылки, потому что выпадающее меню снова исчезает, если вы перемещаете мышь за пределы div.

Вот код, я работаю с:

#menu { 
 
    float: left; 
 
    background-color: #eeeeee; 
 
    width:1000px; 
 
    border: 1px solid black; 
 
    height: 50px; 
 
} 
 

 
#main { 
 
    float: left; 
 
    width: 990px; 
 
    height: 50px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    padding-left: 10px; 
 
} 
 

 
/* Just making the links look a bit like buttons */ 
 

 
#menu ul { 
 
margin-left: -2.5em; 
 
} 
 

 
#menu li ul { 
 
display: none; 
 
} 
 

 
#menu li:hover ul { 
 
display: block; 
 
} 
 

 
#menu li { 
 
list-style-type: none; 
 
width: 8em; 
 
text-align: center; 
 
float: left; 
 
margin-right: 1em; 
 
} 
 

 
#menu a { 
 
color: black; 
 
text-decoration: none; 
 
display: block; 
 
box-shadow: 5px 5px 5px grey; 
 
background-color: #CCCCCC; 
 
border: 1px outset grey; 
 
border-radius: 5px; 
 
} 
 

 
#menu a:hover { 
 
background-color: #DDDDDD; 
 
border: none; 
 
box-shadow: 2px 2px 2px grey; 
 
}

<!DOCTYPE HTML> 
 
    
 
    <html lang="en-GB"> 
 
     
 
     <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Test</title> 
 
      <link rel="stylesheet" 
 
        type="text/css" 
 
        href="test.css"> 
 
     </head> 
 
     
 
     <body> 
 
     
 
     <div id="menu"> 
 
     <ul> 
 
      <li><a>Link1</a></li> 
 
      <li><a>Link1</a></li> 
 
      <li><a>Link3</a> 
 
       <ul> 
 
        <li><a>SubLink1</a></li> 
 
        <li><a>SubLink2</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a>Link4</a></li> 
 
     </ul> 
 
     </p> 
 
     </div> 
 
     
 
     <div id="main"> 
 
      
 
      <p> 
 
       Lorem ipsum dolor sit amet, similique assueverit id pro. Agam insolens 
 
       deterruisset ei usu. In eos vocent numquam, an exerci tamquam complectitur 
 
       his. 
 
      </p> 
 
      
 
     </div> 
 
     
 
     </body> 
 
     
 
    </html>

Как получить меню, чтобы упасть вниз по ниже DIV ?? ПОМОГИТЕ!

источник

2014-11-27 Stotty146

Какой браузер вы используете? – smartmeta

Привет, я использую Chrome, но теперь у меня есть ответ. Большое спасибо за то, что вы меня разыскали. – Stotty146

Используйте z-index, чтобы изменить положение оси z. Установите его на любое число больше 1 (1 - значение по умолчанию) и установите значение position.

#menu { 
    z-index: 2; 
    position: relative; 
}

источник

2014-11-27 23:26:59

Большое спасибо за ответ, но это не работает. Я добавил его под #menu, но это ничего не меняет. :( – Stotty146

Легенда !!! Большое вам спасибо :) – Stotty146

использование position: relative; на #menu a как

#menu a { 
color: black; 
text-decoration: none; 
display: block; 
box-shadow: 5px 5px 5px grey; 
background-color: #CCCCCC; 
border: 1px outset grey; 
border-radius: 5px; 
position: relative; 
}

источник

2014-11-27 23:43:20 Jaiff

Я не могу комментировать, потому что не хватает репутации, но меню перекрывается, потому что ваш #menu и #main оба float:left, это означает, что они» вывозятся из нормального потока, которые вызывают вашу проблему.

Я не понимаю, почему вы добавить float:left здесь, так как они не помещаются на экране < 1900px, так что если вам не нужно плавать, удалить его и, возможно, заменить display:inline-block вместо того, чтобы решить вашу проблему.

источник

2014-11-27 23:53:29 felixyadomi

Взгляните на это решение:

<style type="text/css"> 

    /* New */ 
    #wrap { 
     position: relative; 
     min-height: 500px; 
    } 
    /* New */ 

    #menu { 
     /* New */ 
     position: absolute; 
     z-index: 999; 
     /* New */ 

     width: 1000px; 
     background-color: #eeeeee; 
     border: 1px solid black; 
     height: 50px; 

    } 

    #main { 
     /* New */ 
     position: absolute; 
     top: 50px; 
     /* New */ 

     width: 1000px; 
     background-color: white; 
     border: 1px solid black; 
     padding-left: 10px; 
    } 

    /* Just making the links look a bit like buttons */ 
    #menu ul { 
     margin-left: -2.5em; 
     position: relative; 
    } 

    #menu li ul { 
     display: none; 
    } 

    #menu li:hover ul { 
     display: block; 
     position: relative; 
    } 

    #menu li { 
     list-style-type: none; 
     width: 8em; 
     text-align: center; 
     float: left; 
     margin-right: 1em; 
    } 

    #menu a { 
     color: black; 
     text-decoration: none; 
     display: block; 
     box-shadow: 5px 5px 5px grey; 
     background-color: #CCCCCC; 
     border: 1px outset grey; 
     border-radius: 5px; 
    } 

    #menu a:hover { 
     background-color: #DDDDDD; 
     border: none; 
     box-shadow: 2px 2px 2px grey; 
    } 
</style> 


<div id="wrap"><!-- New --> 
    <div id="menu"> 
     <ul> 
      <li><a href="">Link1</a></li> 
      <li><a href="">Link1</a></li> 
      <li><a href="">Link3</a> 
       <ul> 
        <li><a href="">SubLink1</a></li> 
        <li><a href="">SubLink2</a></li> 
       </ul> 
      </li> 
      <li><a href="">Link4</a></li> 
     </ul> 
    </div> 

    <div id="main"> 
     <p> 
      Lorem ipsum dolor sit amet, similique assueverit id pro. Agam insolens 
      deterruisset ei usu. In eos vocent numquam, an exerci tamquam complectitur 
      his. 
     </p> 
    </div> 
</div><!-- New -->

источник

2014-11-28 00:08:36

Выпадающее меню, появляющееся за div

ответ

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