导航栏不会向下仅显示在屏幕上
问题描述:
我的导航栏不像块状地显示,而是显示为内嵌。我试图改变显示为不同的东西,如内联,但似乎没有发生。导航栏不会向下仅显示在屏幕上
代码:
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/
答
为了让子菜单纵一横名单内尝试这样的事:
/**
*
* 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>
对不起,我应该更清楚一点。我的意思是子菜单项是内联的,而不是像下拉菜单那样的块。 –