如何让主菜单上的导航菜单溢出

时间：2018-02-05 09:26:04

标签： html css navbar

我创建了带水平菜单的基本html页面，其中包含nav中的子菜单。 我想允许子菜单打开并可在主区域使用，但导航调整大小向下移动。 我尝试了溢出选项，但没有成功（没有effetcs）。我尝试了绝对位置为main，但后来子菜单无法使用（当我将光标移动到子菜单时它会消失），尽管它按照我的意愿显示。代码如下。谢谢你的回答。

header {
  background-color: rgb(200, 200, 200);
  border-radius: 1px;
  color: white;
  text-align: center;
  padding: 1px;
  width: 1480px;
  height: 70px;
}

nav.horizontal {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  text-align: center;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 1480px;
  height: 50px;
  resize: none;
}

main {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 1480px;
  height: 600px;
}

nav.horizontal>li {
  list-style-type: none;
  float: left;
}

nav.horizontal>li>ul {
  list-style-type: none;
  display: none;
  margin: 0;
  padding: 0;
}

nav.horizontal li:hover>ul {
  display: block;
}

nav.horizontal>li>ul>a {
  background-color: rgb(255, 255, 0);
  background-image: -webkit-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
  background-image: -moz-linear-gradient(150deg, rgbrgb(255, 255, 0), rgb(255, 255, 0));
  background-image: -o-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
  background-image: linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(0, 0, 0);
  display: block;
  font-size: .65rem;
  width: 180px;
  height: 30px;
  letter-spacing: .1rem;
  line-height: 30px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
  cursor: pointer;
}

nav.horizontal>li>a {
  background-color: rgb(255, 255, 5);
  background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
  background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
  background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
  background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  width: 211px;
  height: 50px;
  letter-spacing: .1rem;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}

nav.horizontal>li>a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
<body>
  <header>Title</header>
  <nav class="horizontal">
    <li>
      <a href="#"> Menu </a>
      <ul>
        <a href="#">First</a>
        <a href="#">Second</a>
        <a href="#">Third</a>
        <a href="#">Fourth</a>
      </ul>
    </li>
  </nav>
  <main>
  </main>
  <footer>
  </footer>
</body>

2 个答案:

答案 0 :(得分：0)

尝试添加到nav.horizontal > li > ul（subnav）

position: absolute;

保持安全并始终使用ul & li：

<ul>
 <li></li>
</ul>

您随时可以查看标记here (https://validator.w3.org/)

答案 1 :(得分：0)

由于MDN表明

  

HTML <li>元素用于表示列表中的项目。它必须包含在父元素中：有序列表（<ol>），无序列表（<ul>）或菜单（<menu>）。

我会将<li>内的nav.horizontal包裹在<ul>中，然后为父级添加正确的定位（position: relative;，为子级添加position: absolute;。同样在您的情况下，您可能希望将父级的填充和边距设置为0.检查出来：

＆＃13;
＆＃13; 
header {
  background-color: rgb(200,200,200);
  border-radius: 1px;
  color:white;
  text-align:center;
  padding:1px;
  width: 1480px;
  height: 70px;
}
nav.horizontal {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  text-align: center;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 1480px;
  height: 50px;
  resize:none;
}
main {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  overflow: hidden;
  text-align: center;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 1480px;
  height: 600px;
}
nav.horizontal > ul {
  margin: 0;
  padding: 0;
}
nav.horizontal > ul > li {  // our parent element
     list-style-type: none;
     float: left;
     position: relative;
}
nav.horizontal > ul > li > ul {  // our child elemnt
     list-style-type: none;
     display:none;
     margin: 0;
     padding: 0;
     position: absolute;
     top: 100%;
}
nav.horizontal ul li:hover > ul  {
  display: block;
}
nav.horizontal > ul > li > ul > a {
    background-color: rgb(255, 255, 0);
    background-image: -webkit-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
    background-image: -moz-linear-gradient(150deg, rgbrgb(255, 255, 0), rgb(255, 255, 0));
    background-image: -o-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
    background-image: linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
    color: rgb(0,0,0);
    display: block;
    font-size: .65rem;
    width: 180px;
    height: 30px;
    letter-spacing: .1rem;
    line-height: 30px;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
    text-transform: uppercase;
    transition: all .1s ease;
    text-decoration: none;
    cursor: pointer;
}
nav.horizontal > ul > li > a {
        background-color: rgb(255, 255, 5);
        background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
        background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
        background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
        background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
        color: rgb(255,255,255);
        display: block;
        font-size: .85rem;
        font-weight: 500;
        width: 211px;
        height: 50px;
        letter-spacing: .1rem;
        line-height: 50px;
        text-shadow: 0 1px 1px rgba(0,0,0,.1);
        text-transform: uppercase;
        transition: all .1s ease;
        text-decoration: none;
}

nav.horizontal > ul > li > a:hover {
        background-color: rgb(114, 51, 98);
        background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
        background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
        background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
        background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
        cursor: pointer;
}
＆＃13; 
<header>Title</header>
    <nav class="horizontal">  
    <ul>
            <li>
                <a href = "#"> Menu </a>
            <ul>
                <a href="#">First</a>
                <a href="#">Second</a>
            <a href="#">Third</a>
            <a href="#">Fourth</a>
            </ul>
        </li>
    </ul>
    </nav>
    <main>
    </main>
    <footer> 
    </footer>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题