Выберите список опций окно перекрывающихся в меню

enter image description here Выберите список опций окно перекрывающихся в меню

Когда щелчок на поле выбора, то наведите курсор на меню

Выберите поле списка параметр перекрывающихся в меню.

Я уже использовал свойство z-index, но не работал.

Выбрать окно скрыть, но не список опций. Вы можете использовать любое готовое меню и поставить выберите в поле рядом с местом в меню списка опций всегда показывать

CSS:

#navigation { 
    position: relative; 
    text-align:center; 
    margin:0 auto; 
    background-color:#fff; 
} 

#navigation li { 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    padding: 5px 20px; 
} 

#navigation li a { 
    padding: 5px; 
    display: block; 

    font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: 700; 
    color: #3b3b3b; 
    text-align: left; 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.25); 
} 

#navigation li:hover .main { 
    color: #ee4e1d; 
} 

#navigation li .sub-nav-wrapper { 
    display: block; 
    position: absolute; 
    z-index: 30; 
    margin-left: -16px; 
} 

#navigation li .sub-nav-wrapper .sub-nav { 
    width: 150px; 
    margin-top: 4px; 
    background: #fff; 
    border-top: 1px solid #fff; 

    box-shadow: 0 1px 2px rgba(0,0,0,0.35); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35); 
} 

#navigation li:hover .sub-nav-wrapper { 
    display: block; 
} 

#navigation li .sub-nav-wrapper .sub-nav li { 
    list-style: none; 
    display: block; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
    border-bottom: 1px solid #d7d7d7; 
} 

#navigation li .sub-nav-wrapper .sub-nav li:first-child { 
} 

#navigation li .sub-nav-wrapper .sub-nav li:last-child { 
    border: none; 
} 

#navigation li .sub-nav-wrapper .sub-nav li a { 
    display: block; 
    padding: 11px 20px; 
    font-size: 12px; 
    font-weight: 600; 
    text-shadow: 1px 1px 0 rgba(255,255,255,1.0); 

    box-shadow: inset 0 0 2px rgba(255,255,255,1.0); 
    -moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0); 
    -webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0); 
} 

#navigation li .sub-nav-wrapper .sub-nav li:hover { 
    background: #f5f5f5; 
    border-bottom: 1px solid #3b3b3b; 
} 

/*****END DROPDOWN*****/ 


HTML : 
<ul id="navigation"> 
    <li> 
     <a href="index.html" class="main">Home</a> 
    </li> 

    <li> 
     <a href="#" class="main">Portfolio</a> 
     <div class="sub-nav-wrapper"><ul class="sub-nav"> 
      <li><a href="#">Graphics</a></li> 
      <li><a href="#">Web</a></li> 
      <li><a href="#">Print</a></li> 
     </ul></div> 
    </li> 

    <li> 
     <a href="#" class="main">Services</a> 
     <div class="sub-nav-wrapper"><ul class="sub-nav"> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">SEO</a></li> 
      <li><a href="#">Content Writing</a></li> 
     </ul></div> 
    </li> 

    <li> 
     <a href="#" class="main">Technology</a> 
     <div class="sub-nav-wrapper"><ul class="sub-nav"> 
      <li><a href="#">JavaScript</a></li> 
      <li><a href="#">HTML/CSS</a></li> 
      <li><a href="#">Drupal</a></li> 
      <li><a href="#">Joomla</a></li> 
      <li><a href="#">Wordpress</a></li> 
      <li><a href="#">MySQL</a></li> 
      <li><a href="#">Oracle</a></li> 
     </ul></div> 
    </li> 

</ul> 

<!-----END NAVIGATION-----> 
<div style="margin:0 auto;width:900px;text-align:center;"> 
<select name="search_type" id="search-type" > 
       <option value="Data2">Data1</option> 
       <option value="Data1">Data1</option> 
       </select> 
       </div>

источник

2013-12-18 Anonymous

Можем ли мы увидеть код? –

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

Спасибо за ответ. не может публиковать код, но его простое меню, и я уже использовал z-индекс и позицию, но не работал. Выберите окно скрыть, но не список опций –

попробуйте добавить: "position:relative" для родительского DIV меню.

источник

2013-12-18 09:45:20 Era

Спасибо за ответ, но позиция: относительная не работает –

По крайней мере, покажите пример кода с образцом текста .. мы не можем представить вашу структуру. Где вы применили эту должность? – Era

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

источник

2013-12-18 09:53:30

Спасибо за ответ, но z-index не работает –

Выберите список опций окно перекрывающихся в меню

ответ

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