个人中心
gpt4 book ai didi

html - CSS 全宽菜单，在各自的条目下方有下拉菜单

转载 作者：太空宇宙 更新时间：2023-11-04 06:32:16 24 4
gpt4 key购买 nike

JSFiddle here

我有一个全宽的 css 菜单，可以延伸整个屏幕，但我无法弄清楚如何让相应的子导航项位于其父级下方。

这能做到吗？我在网上找不到任何让我完全做到这一点的东西，但肯定有可能，不是吗？

顶部菜单项的数量需要可变，因此无论有多少，它都会相应地拉伸(stretch)。

链接到上面的 JSFiddle 以查看到目前为止我得到了什么。

html:

<div class="nav">
      <ul id="css3menu1" class="topmenu">
        <li class="link"><a href="/content/home.php">Home</a>
        </li>
        <li class="link"><a href="/content/products.php">Products</a>
          <ul>
            <li class="sublink"><a href="/content/products.php">Sub Products</a></li>
            <li class="sublink"><a href="/content/switchboards_distribution_panels.php">Switchboards</a></li>
          </ul>
        </li>
        <li class="link"><a href="/content/solutions.php">Solutions</a>
        </li>
        <li class="link"><a href="/content/case_studies.php">Case Studies</a>
        </li>
        <li class="link"><a href="/content/downloads.php">Downloads</a>
        </li>
        <li class="link"><a href="/content/careers.php">Careers</a>
        </li>
        <li class="link"><a href="/content/contact.php">Contact</a>
        </li>
      </ul>
    </div>

CSS:

ul#css3menu1,ul#css3menu1 ul{
    margin:0;
    list-style:none;
    padding:0;
    z-index:5000;
}
ul#css3menu1 ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    padding:10px 10px 10px 10px;
    margin:0px 0 0 -13px;
  background-color:#fff;
}
ul#css3menu1 li:hover>ul{
    display:inline-block;
}
ul#css3menu1 li:hover li{
}
ul#css3menu1 li{
    display:table-cell;
    /*white-space:nowrap;*/
    font-size:0;
    color:#000;
}
ul#css3menu1 li:hover{
    z-index:1;
}
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:relative;
    display:table;
  table-layout:fixed;
  width:100%;
    zoom:1;
    padding:0;
    *display:inline;
}
* html ul#css3menu1 li a{
    display:block;
}
ul#css3menu1>li{
    margin:0;
}
ul#css3menu1 .link a:active, ul#css3menu1 .link a:focus{
    outline-style:none;
}
ul#css3menu1 .link a{
    display:block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    font-size:14px;
    color:#777777;
    cursor:pointer;
    padding:23px 9px 24px;
    font-weight:bold;
    transition:all ease-in-out 0.4s;
    border-right:1px solid #eef1f1 !important;
  letter-spacing:0px;
}
ul#css3menu1 .link a:last-of-type{
    border-right:0;
}
ul#css3menu1 .link a.selected{
    background-color:#E4E8E8;
}
ul#css3menu1 .link a:hover{
    background-color:#E4E8E8;
    transition:all ease-in-out 0.4s;
}
ul#css3menu1 ul li{
    float:none;
    display:inherit;
    margin:10px 0 0;
}
ul#css3menu1 ul ul{
    margin-left:-10px;
}
ul#css3menu1 ul a{
    text-align:left;
    padding:4px;
    font:14px Tahoma;
    color:#FFF;
    text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    text-decoration:none;
}
ul#css3menu1 span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    color:#666;
    text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
    border-width:0;
}
ul#css3menu1 li.toplast>a{
    }

最佳答案

问题不在于您的代码或什么是可能的。这就是 CSS 为 position: absolute 引用原点的方式.

top/left 之类的 Origin 值基于具有指定位置值的下一个父元素。如果链中没有明确定位的元素，则原点基于 <body>元素。

|||| Element with position: absolute
||| - parent
|| - parent position: relative (this X/Y is used to position the element)
|

你只需要给你的导航容器定位。这是一个例子:

(注意:在示例中，我使用 flexbox 来对齐菜单以使生活更轻松，ul 和 li 也可以。另外，将鼠标悬停在容器上，以便移动到子内容将使菜单保持打开状态。)

nav {
    display:flex;
    justify-content: space-between;
}

.navItem {
    flex-basis: 1;
    background: #333333;
    color: #ffffff;
    margin: 0 1px;
    cursor:pointer;
    position: relative; // this is important to have
}

.navItem span {
    display:block;
    margin: 10px;
}

.subNav {
    position: absolute;
    top: 100%; // push to bottom of container
    left: 0;
    min-width: 100%;
    background: #555555;
    color: #ffffff;
    display:none;
}

.navItem:hover .subNav {
    display:block;
}
<nav>
    <div class="navItem">
        <span>Main Nav</span>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
        <div class="subNav">
            <span class="subMenuItem">Sub 1</span>
            <span class="subMenuItem">Sub 2</span>
            <span class="subMenuItem">Sub 3</span>
            <span class="subMenuItem">Sub 4</span>
        </div>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
        <div class="subNav">
                <span class="subMenuItem">Sub 1</span>
                <span class="subMenuItem">Sub 2</span>
                <span class="subMenuItem">Sub 3</span>
                <span class="subMenuItem">Sub 4</span>
            </div>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
    </div>
</nav>

关于html - CSS 全宽菜单，在各自的条目下方有下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54559170/

24 4 0
文章推荐： python - Django 模板反向 url 解析而不为变量创建组
文章推荐： php - python/php - 跨语言字符串压缩(使用 gzcompress/urlencode/json)
文章推荐： c - 尝试将结构传递给函数时保持段错误
文章推荐： python - Scipy griddata 在循环/内存泄漏中不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com