文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >下拉菜单垂直放置在链接上

问下拉菜单垂直放置在链接上
EN

Stack Overflow用户
提问于 2016-07-01 05:59:21
回答 3查看 28关注 0票数 0

这必须是一些基本的，但不是所有新的CSS成员。快速一，我如何使下拉菜单在相同的链接，而不是在线上？我希望它垂直下降在同一地方，而不是延伸成一条线。有人吗？

​

代码语言：javascript
复制
.nav-container {
      float: center;
      width: 100%;
      padding-bottom: 0;
      margin-bottom: 11px;
     
     
    }

    .navigation-menu {
      padding:  0;
      float: center;
      clear: both;
      font-size: 12px

      margin-bottom: 0;
    }

    .navigation-menu > li {
       margin-right: 3px;
        margin: 100px auto;
       
        line-height:20px;
        max-width:860px;
        display: inline;
     }

    .navigation-menu li {
      list-style-type: none;
    }

    .navigation-menu li a {
      background-color: #ffffff;
      display:inline-block;
      
      padding: 10px 20px;
      color: #696969;
      text-decoration: none;
      border-radius: 4px 4px 0 0;
    }

.navigation-menu li.active a {
      background-color: purple;
      color:#fff;
      }
    .navigation-menu li ul {
      display: none;
      
    }
    .navigation-menu ul li a{
      padding:10px 20px;
    }

    #main {
      clear: left;
    }

    .navigation-menu li:hover ul {
      display: inline-block;
      position: absolute;  
      padding:5px;
      
    }

    .navigation-menu li ul li a:hover{
      background-color: black;
      color: white;
     display: block;
    }


    .navigation-menu li a:hover{
      background-color:black;
      color: white;
 
   }
   .navigation-menu li a:active {
    background-color: purple;
    color:#fff;
}

.navigation-menuul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
代码语言：javascript
复制
<div class="nav-container">
    <ul class="navigation-menu">
      <li><a href='#' >Home</a></li>
          <li class="active"><a href='#' >C2B Payments</a> </li>
          <li><a href='#' >C2B SMS</a>
      <ul>
          <li><a href="#"> C2B SMS</a></li>
          <li><a href="#"> Send SMS</a></li>
         <li><a href="#"> Campaign SMS</a></li>
        </ul>
         </li>
       </ul>
  </div>

​

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-01 06:03:57

添加以下代码.navigation-menu li { position: relative; }和.navigation-menu li ul { display: none; position: absolute; left: 0; }以获得对齐下拉列表的结果

票数 2
EN

Stack Overflow用户

发布于 2016-07-01 06:03:44

在您的文件中添加到此css中

代码语言：javascript
复制
.navigation-menu li:hover ul {
    top: 100%;
    left: 0;
}


.navigation-menu > li {
    position: relative;
}

​

代码语言：javascript
复制
.nav-container {
      float: center;
      width: 100%;
      padding-bottom: 0;
      margin-bottom: 11px;
     
     
    }
.navigation-menu li:hover ul {
top: 100%;
left: 0;
}


.navigation-menu > li {
position: relative;
}
    .navigation-menu {
      padding:  0;
      float: center;
      clear: both;
      font-size: 12px

      margin-bottom: 0;
    }

    .navigation-menu > li {
       margin-right: 3px;
        margin: 100px auto;
       
        line-height:20px;
        max-width:860px;
        display: inline;
     }

    .navigation-menu li {
      list-style-type: none;
    }

    .navigation-menu li a {
      background-color: #ffffff;
      display:inline-block;
      
      padding: 10px 20px;
      color: #696969;
      text-decoration: none;
      border-radius: 4px 4px 0 0;
    }

.navigation-menu li.active a {
      background-color: purple;
      color:#fff;
      }
    .navigation-menu li ul {
      display: none;
      
    }
    .navigation-menu ul li a{
      padding:10px 20px;
    }

    #main {
      clear: left;
    }

    .navigation-menu li:hover ul {
      display: inline-block;
      position: absolute;  
      padding:5px;
      
    }

    .navigation-menu li ul li a:hover{
      background-color: black;
      color: white;
     display: block;
    }


    .navigation-menu li a:hover{
      background-color:black;
      color: white;
 
   }
   .navigation-menu li a:active {
    background-color: purple;
    color:#fff;
}

.navigation-menuul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
代码语言：javascript
复制
<div class="nav-container">
    <ul class="navigation-menu">
      <li><a href='#' >Home</a></li>
          <li class="active"><a href='#' >C2B Payments</a> </li>
          <li><a href='#' >C2B SMS</a>
      <ul>
          <li><a href="#"> C2B SMS</a></li>
          <li><a href="#"> Send SMS</a></li>
         <li><a href="#"> Campaign SMS</a></li>
        </ul>
         </li>
       </ul>
  </div>

​

票数 0
EN

Stack Overflow用户

发布于 2016-07-01 06:05:55

​

代码语言：javascript
复制
.nav-container {
      float: center;
      width: 100%;
      padding-bottom: 0;
      margin-bottom: 11px;
     
     
    }

    .navigation-menu {
      padding:  0;
      float: center;
      clear: both;
      font-size: 12px

      margin-bottom: 0;
    }

    .navigation-menu > li {
       margin-right: 3px;
        margin: 100px auto;
       
        line-height:20px;
        max-width:860px;
        display: inline;
     }

    .navigation-menu li {
      list-style-type: none;
    }

    .navigation-menu li a {
      background-color: #ffffff;
      display:inline-block;
      
      padding: 10px 20px;
      color: #696969;
      text-decoration: none;
      border-radius: 4px 4px 0 0;
    }

.navigation-menu li.active a {
      background-color: purple;
      color:#fff;
      }
    .navigation-menu li ul {
      display: none;
     position: relative;
     top: 50px;
     left: 215px;
      
    }
    .navigation-menu ul li a{
      padding:10px 20px;
    }

    #main {
      clear: left;
    }

    .navigation-menu li:hover ul {
      display: inline-block;
      position: absolute;  
      padding:5px;
      
    }

    .navigation-menu li ul li a:hover{
      background-color: black;
      color: white;
     display: block;
    }


    .navigation-menu li a:hover{
      background-color:black;
      color: white;
 
   }
   .navigation-menu li a:active {
    background-color: purple;
    color:#fff;
}

.navigation-menuul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
代码语言：javascript
复制
<div class="nav-container">
    <ul class="navigation-menu">
      <li><a href='#' >Home</a></li>
          <li class="active"><a href='#' >C2B Payments</a> </li>
          <li><a href='#' >C2B SMS</a>
      <ul>
          <li><a href="#"> C2B SMS</a></li>
          <li><a href="#"> Send SMS</a></li>
         <li><a href="#"> Campaign SMS</a></li>
        </ul>
         </li>
       </ul>
  </div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38138045

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档