Question

我的导航栏没有按照我所说的方式显示，而是显示内联。我试图将显示更改为内联等不同的内容，但似乎没有任何事情发生。

代码：

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/

Answer 1

我不确定你要求的是什么，但如果你想让你的导航栏像这样堆叠......

然后你必须在你的css中更改这些代码行：

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

为：

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

Answer 2

要使子菜单在水平列表中垂直，请尝试以下方法：

/** 
 *
 *  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>

导航栏不会向下显示到侧面

2 个答案: