Ли меню ссылки собирается под содержанием при загрузке страницы + CSS

Question

http://jsfiddle.net/msbyuva/QPQqs/

Привет У меня есть меню, сформированное с помощью

<ul class="topnav"> 
          <li>@Html.ActionLink("Configuration", "Configuration", "Home")</li> 
          <li>@Html.ActionLink("Reporting", "Reporting", "Home") 
          <ul class="subnav"> 
        <li>@Html.ActionLink("Pipeline", "Pipeline", "Pipeline", null, new { target = "_blank", Url = "http://storespipeline/stores/" })</li> 
          <li>D2C OBI Reports</li>     


          <li>@Html.ActionLink("Device Utilization", "DeviceUtilization", "DeviceUtilization")</li> 

          <li>@Html.ActionLink("Display Audit", "DisplayAudit", "DisplayAudit")</li> 
          <li>@Html.ActionLink("TrueVUE Reports", "TrueVUE", "TrueVUE")</li>         
          </ul> 
          </li> 
          <li>@Html.ActionLink("Admin", "Admin", "Home")</li> 
        </ul> 

CSS:

ul.topnav { list- стиль: нет; обивка: 10px; margin: 0; float: слева; ширина: 100%; фон: # f6f6f6; Размер шрифта: 1em; цвет: черный; } ul.topnav li { float: слева; margin: 0; прокладка: 0 15px 0 0; позиция: относительная; } ul.topnav li a { padding: 5px 0px 0px 0px; цвет: черный; дисплей: стол; text-decoration: none; float: слева; } ul.topnav li a: hover { text-decoration: underline; font-weight: bold; }

ul.topnav li span.subhover 
    { 
    } 
    ul.topnav li ul.subnav 
    { 
     list-style: none; 
     position: absolute; 
     left: 0px; 
     top: 25px; 
     background: #f6f6f6; 
     margin: 0; 
     padding: 0px 0px 0px 0px; 
     height: auto; 
     display: none; 
     float: left; 
     min-width: 100px; 
     width: auto; 
    } 
    ul.topnav li ul.subnav li 
    { 
     margin: 0px; 
     padding: 4px 10px 0px 10px; 
     height: auto; 
     line-height: 100%; 
    } 

    html ul.topnav li ul.subnav li a 
    { 
     float: left; 
     width: 150%; 
     margin: 0px; 
     padding: 0px 0px 0px 0px; 
     text-align: left; 
    } 

    html ul.topnav li ul.subnav li a:hover 
    { 

    } 
</style> 

Когда я нажимаю на примере ссылку - Display Audit - когда страница загружается - ссылка меню под содержимым страницы ..., которые можно увидеть на изображении (последний две ссылки идут под содержимым страницы) ..... как я могу отобразить ссылку меню над содержимым страницы?

Я использую IE7, CSS 2.1

Answer 1

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

.topnav { 
    position:relative; 
    z-index:1000; 
} 

.yourContentContainer{ 
    position:relative; 
    z-index:1; 
}