Sub Navigation Display Issue

Question

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

ASPX страница

<div id="navigation"> 
        <ul> 
         <li id="tab1"> 
          <a href="Home.aspx">Home</a> 
         </li> 
         <li id="tab2"> 
          <a href="AllHouses.aspx">Houses</a> 
          <ul> 
           <li> 
            <a href="Houses.aspx">Search Houses</a> 
           </li> 
          </ul> 
         </li> 
         <li id="tab3"> 
          <a href="Events.aspx">Events</a> 
         </li> 
         <li id="tab4"> 
          <a href="Maps.aspx">Maps</a> 
         </li> 
         <li id="tab5"> 
          <a href="About.aspx">About</a> 
         </li> 
         <li id="tab6"> 
          <a href="Contact.aspx">Contact</a> 
         </li> 
         <li id="tab7"> 
          <a href="Links.aspx">Links</a> 
         </li> 
        </ul> 
       </div> 

Моя Субнавигация вкладка поиска дома на вкладке дома.

CSS

#navigation { 
    background: url(../images/bg-navigation.png) no-repeat; 
    clear: both; 
    height: 50px; 
    width: 860px; 
    margin: 0 auto; 
    padding: 1px; 
    position: relative; 
    z-index: 10; 
} 

    #navigation ul { 
     display: inline-block; 
     width: 860px; 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 

    #navigation li { 
     float: left; 
     background-position: 0 -118px; 
     background-repeat: no-repeat; 
     height: 49px; 
     width: 122px; 
     margin: 0; 
     padding-left: 1px; 
     text-align: center; 
    } 

     #navigation li:first-child { 
      background: none; 
      margin-left: 0; 
      padding-left: 0; 
     } 

     #navigation li a { 
      color: #fff; 
      display: block; 
      font: bold 14px/48px Arial, Helvetica, sans-serif; 
      height: 49px; 
      text-decoration: none; 
      text-transform: uppercase; 
     } 

      #navigation li a:hover { 
       background-position: 0 -59px; 
       color: #6d6157; 
      } 

     #navigation li.selected a { 
      background-position: 0 0; 
      color: #e4e1bd; 
     } 

Функция Чтобы выбрать вкладку На мастер-странице

function setCurrentTab(selectedTab) { 
      $('li').removeClass('selected'); 
      $('[id=' + selectedTab + ']').addClass('selected'); 
     } 

Дома Функция

$(function() { setCurrentTab('tab2'); }); 

Поиск домов Функция «TAB2»

$(function() { setCurrentTab('tab2'); }); 

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

Просмотр

Это домашняя страница работает Выделенная часть суб навигации на вкладке «поиск дома», которые вы не должны быть в состоянии видеть, пока я не наведите курсор мыши на закладке дома.

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

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

Когда я нажимаю вкладку дома и вкладки выбран, которые я не хочу, я хочу только вкладку домов выбраны.

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

• Я не хочу, чтобы суб-навигация всегда отображалась как на первом изображении.
• Я только хочу, чтобы это отображалось, когда я наводил курсор на вкладку домов, как на втором изображении, но отображаю его так, как будто он находится на третьем изображении, и ему не нужно перемещаться вниз на вкладку выделенной части/поисковых домов, чтобы увидеть ее ,
• Я хочу, чтобы вкладка «Дома» была выбрана только для обеих домов и страницы поисковых домов.

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

Answer 1

Я сделал снимок, см. Мою скрипку here.

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

В подменю, я добавил стиль ниже, так что подменю скрыта, пока не колебались:

#navigation li ul { 
    display: none; 
    background: #ddd; 
} 
#navigation li:hover ul { 
    width: 100%; 
    display: inline-block; 
    position: absolute; 
    top: 100%; 
    left: 1px; 
} 

Я также изменил эту часть (требуется для позиционирования подменю), где я добавил position: relative стиль.

#navigation li { 
    float: left; 
    background-position: 0 -118px; 
    background-repeat: no-repeat; 
    height: 49px; 
    width: 122px; 
    margin: 0; 
    padding-left: 1px; 
    text-align: center; 
    position: relative; 
}