메뉴 항목과 하위 메뉴 항목을 서로 덮지 않고 세로로 표시합니다.

Question

내 메뉴를 반응적으로 만들기위한 첫 단계로 css로 미디어 쿼리를 추가하여 각 목록 항목이 세로로 표시되도록 메뉴가 표시되는 방식을 변경하려고합니다. 다음 항목이 표시되기 전에 하위 항목이 아래에 표시됩니다. 희망은 그 말이 맞습니다. 여기 사이트의 데스크톱 버전에서 메뉴 작업을 구성하는 HTML과 CSS 있습니다 :

HTML

<nav> 
<img id="logo" src="@logoUrl"> 

<ul> 

    <li class="@(CurrentPage.Url == "/" ? "current" : null)"><a href="/">Home</a></li> 

    @foreach (var item in menuItems) 
    { 
     <li class="@(CurrentPage.Id == item.Id ? "current" : null)"> 
      <a href="@item.Url">@item.Name</a> 

     @if (item.Children.Where("Visible").Any()) 
     { 

      var subMenuItems = item.Children.Where("Visible"); 

      <ul> 
       @foreach (var sub in subMenuItems) 
       { 
        <li><a href="@sub.Url">@sub.Name</a></li> 
       } 
     </ul> 

     } 

     </li> 
    } 
</ul> 
<br class="clear"> 
</nav> 

(이 Umbraco에, 그래서 모든 면도기 비트를 용서)

CSS를

:

#logo { 
    float: left; 
    margin-right: 25px; 
    } 

nav { 
    width: 100%; 
    height: auto; 
    background-color: #354a49; 
} 

nav > ul > li { 
    display: block; 
    position: relative; 
    width: auto; 
    height: 50px; 
    float: left; 
    font-size: 1.1em; 
    margin: 0px 20px 0px 20px; 
    padding: 15px 8px 13px 8px; 
    text-align: center; 
} 

nav ul li a { 
    color: #fefce9; 
    margin-left: auto; 
    margin-right: auto; 
} 

nav ul li a:hover { 
    font-style: italic; 
} 

nav ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 99; 
    width: 200px; 
} 

nav ul li:hover { 
    border-bottom: 2px solid #fefce9; 
    background-color: #a1b0af; 
} 

nav ul li:hover > ul { 
    display: block; 
    margin-top: 2px; 
} 

nav ul li ul li { 
    display: block; 
    float: none; 
    padding: 20px 3px; 
    background-color: #a1b0af; 
    border-bottom: 2px solid #fefce9; 
} 

nav ul li ul li a { 
    color: #fefce9; 
} 

nav li.current { 
    background-color: #a1b0af; 
    border-bottom: 2px solid #fefce9; 
} 

nav li.current > a { 
    color: #fefce9; 
    font-style: italic; 
} 

그리고 여기에 내가 순간 내 미디어 쿼리에있는 CSS입니다

기본 메뉴 항목을 다른 하나의 아래쪽에 표시합니다. 그러나 메뉴 항목 사이에 하위 메뉴 항목이 표시되도록 변경하려고하면 메뉴 항목 상단에 나타나는 하위 메뉴 항목으로 끝납니다. 서로.

여기에 편집

요청으로 렌더링 된 HTML이다 :

</nav> 
    <img id="logo" src="/media/1042/wshalogo.png"> 

    <ul> 

     <li class="current"><a href="/">Home</a></li> 

      <li> 
       <a href="/about-us/">About us</a> 

       <ul> 
         <li><a href="/about-us/our-people/">Our People</a></li> 
         <li><a href="/about-us/who-we-were-and-are/">Who we were and are</a></li> 
         <li><a href="/about-us/our-houses/">Our Houses</a></li> 
         <li><a href="/about-us/annual-reports/">Annual Reports</a></li> 
      </ul> 

      </li> 
      <li> 
       <a href="/being-a-tenant/">Being a Tenant</a> 

       <ul> 
         <li><a href="/being-a-tenant/asbestos/">Asbestos</a></li> 
         <li><a href="/being-a-tenant/being-safe-secure/">Being Safe &amp; Secure</a></li> 
      </ul> 

      </li> 
      <li> 
       <a href="/news/">News</a> 

       <ul> 
         <li><a href="/news/community-garden/">Community Garden</a></li> 
         <li><a href="/news/football-team/">Football Team</a></li> 
         <li><a href="/news/health-centre/">Health Centre</a></li> 
      </ul> 

      </li> 
    </ul> 
    <br class="clear"> 
</nav> 

Answer 1

두 번째 수준 ul 그것이 일반 문서 흐름에서 촬영 한 것 및 관련 공간을 차지하지 의미 position: absolute;입니다 다른 요소. absolute을 relative으로 변경해보십시오. 그것은 항목을 메뉴에 올바르게 배치해야합니다.

nav ul ul { 
    display: none; 
    position: absolute; /* <--- Try changing this to relative. */ 
    top: 100%; 
    left: 0; 
    z-index: 99; 
    width: 200px; 
} 

또한, 최상위 li에 고정 높이는 요소가 50px 과거를 성장하지 않습니다. min-height 대신 그 설정을 시도해보십시오 in this fiddle 근무하지만, 하위 메뉴가 떴다 후 취소 공중 선회했다 어색한 점프에지도

nav > ul > li { 
    display: block; 
    position: relative; 
    width: auto; 
    height: 50px; /* <-- min-height: 50px */ 
    float: left; 
    font-size: 1.1em; 
    margin: 0px 20px 0px 20px; 
    padding: 15px 8px 13px 8px; 
    text-align: center; 
} 

.

또한 사용 사례를 고려해보십시오. 태블릿/휴대 기기를 지원하기 위해이 작업을 수행하는 경우 :hover 상태는 마우스를 사용할 때와 같은 방식으로 작동하지 않습니다. 사용자는 드롭 다운을 보려면 "About Us"링크 텍스트 옆에 눌러야한다는 것을 알고 있어야합니다. 그렇지 않으면 :hover 상태를 보지 않고 "About Us"페이지로 직접 이동하게됩니다. 트리 구조에서 모든 항목을 표시하거나 JavaScript를 사용하여 하위 메뉴에 대한 추가 기능을 추가해야 할 수도 있습니다.

Here's a decent solution에 자바 스크립트가없는 응답 하위 메뉴가 있지만 하위 항목이있는 최상위 메뉴 항목에 대한 링크는 사용하지 않습니다.