導航欄不會向下僅顯示在屏幕上

-1

我的導航欄不像塊狀地顯示，而是顯示爲內嵌。我試圖改變顯示爲不同的東西，如內聯，但似乎沒有發生。導航欄不會向下僅顯示在屏幕上

代碼：

HTML：

<body> 
     <div id="container"> 
      <header id="M_head"> 
       <h1>Testing Javascript</h1> 
       <nav id="M_nav"> 
        <ul> 
         <li><a href="">Menu1</a> 
          <ul> 
           <a href="">Sub1</a> 
           <a href="">Sub2</a> 
           <a href="">Sub3</a> 
           <a href="">Sub4</a> 
          </ul> 
         </li> 
         <li><a href=""> Menu2</a></li> 
         <li><a href="">Menu3</a></li> 
         <li><a href="">Menu4</a></li> 
         <li><a href="">Menu5</a></li> 
        </ul> 
       </nav> 
      </header> 

     </div> 
    </body>

SCSS：

*{ 

margin:0px; 
max-width:100%; 
padding:0px; 

body{ 
    border: 2px solid black; 
    display:block; 
    margin:0px auto; 
    max-width:100; 

    #M_head{ 


      h1{ 
       background-color:slategrey; 
       color:black; 
       display:block; 
       font:italic bold 50px/30px Georgia, serif; 
       letter-spacing: -5px; 
       padding-bottom:20px; 
       padding-top:10px;    
     } 

      #M_nav{ 
       background-color:black; 
       padding:5px; 
       ul{ 
        text-align:center; 
        padding:inherit; 
        width:100%; 
        li{ 
         display:inline-block; 
         a{ 

          color:white; 
          font-weight:bolder; 
          font-size:18px; 
          height:100%; 
          padding-left:70px; 
          padding-right:70px; 
          padding-top:11px; 
          padding-bottom:13px; 
          text-decoration:none; 
          transition:background 1s; 

         } 

         a:hover{ 
          background-color:white; 
          color:black; 
         } 
         ul{ 
          background-color:black; 
          display:none; 

          li{ 
           display:block; 
          } 
         } 


        } 

        li:hover > ul{ 
         display:block; 
        } 
      } 
     } 
    } 
}

}

的jsfiddle：HTTPS：https://jsfiddle.net/n45rmksr/1/

來源

2015-11-02 Jayden Freh

我不是真正的LY確保你問什麼，但如果你想你的導航欄疊放這樣......

然後你必須改變這行代碼在你的CSS：

 * body #M_head #M_nav ul li { 
     display: inline; }

到：

 * body #M_head #M_nav ul li { 
     display: block; }

來源

2015-11-02 21:43:54

對不起，我應該更清楚一點。我的意思是子菜單項是內聯的，而不是像下拉菜單那樣的塊。 –

爲了讓子菜單縱一橫名單內嘗試這樣的事：

/** 
 
* 
 
* Just some basic resets 
 
* 
 
*/ 
 
html { box-sizing: border-box; } 
 
*, *:before, *:after { box-sizing: inherit; } 
 
body { margin: 0; } 
 

 

 
/** 
 
* 
 
* Visual styling 
 
* 
 
*/ 
 
nav { background: black; } 
 
nav a { 
 
    -webkit-transition: all .5s; 
 
      transition: all .5s; 
 
    padding: 11px 20px; 
 
    font: italic bold 16px Georgia, serif; 
 
    text-decoration: none; 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
nav a:hover { 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 

 
/** 
 
* 
 
* Layout styling 
 
* 
 
*/ 
 
nav { display: block; } 
 

 
nav ul { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    /* Remove font size on ul to prevent the 4px */ 
 
    /* spacing caused by inline-block element  */ 
 
    font-size: 0; 
 
    /* Center position menu items */ 
 
    text-align: center; 
 
} 
 

 
nav li, nav a { 
 
    display: inline-block; 
 
    /* Use relative to make submenus position to it's parent */ 
 
    position: relative; 
 
} 
 

 
nav li ul li a, 
 
nav li ul li { 
 
    /* Make sub menu items to fill the nested ul */ 
 
    width: 100%; 
 
} 
 

 

 
nav li ul { 
 
    /* Animate submenu using max-height (height won't work) */ 
 
    -webkit-transition: all .5s; 
 
      transition: all .5s; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    /* Absolute position in relation to parent li */ 
 
    position: absolute; 
 
} 
 
nav li:hover > ul { 
 
    /* Approximate submenu height (a little larger) */ 
 
    max-height: 250px; 
 
} 
 

 

 
/** 
 
* 
 
* Stacked menu styling 
 
* 
 
*/ 
 
@media (max-width: 480px) { 
 
    nav a { width: 100%; } 
 
    nav li { display: block; } 
 
    nav li + li { border-top: 1px solid #282828; } 
 
    nav li ul { position: relative; } 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu1</a> 
 
      <ul> 
 
       <li><a href="#">Sub1</a></li> 
 
       <li><a href="#">Sub2</a></li> 
 
       <li><a href="#">Sub3</a></li> 
 
       <li><a href="#">Sub4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a></li> 
 
     <li><a href="#">Menu4</a></li> 
 
     <li><a href="#">Menu5</a></li> 
 
    </ul> 
 
</nav>

來源

2015-11-03 10:05:55

導航欄不會向下僅顯示在屏幕上

回答

相關問題