个人中心
gpt4 book ai didi

html - 简单的 "Sub Sub"选项

转载 作者：太空宇宙 更新时间：2023-11-04 14:12:38 29 4
gpt4 key购买 nike

我创建了一个带有 2 级子菜单的简单导航。我正在寻找“sub sub”选项以显示在其父项的右侧而不是下方。对于 CSS 的任何帮助，我将不胜感激。下面是 html 和 css 以及 JS fiddle 链接。

提前谢谢大家，

HTML

<body>
<header>
    <h1><a href="http://www.test.com/demo">Test Website</a></h1>
    Just another WordPress site <form role="search" method="get" id="searchform" action="http://www.test.com/demo/" >
    <div><label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
    </div>
    </form>    <div class="nav-bar">
     <nav class="main-nav"><ul id="menu-main-nav" class="menu"><li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-236 current_page_item menu-item-238"><a href="http://www.test.com/demo/">Home</a></li>
<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://www.test.com/demo/second-page/">Second Page</a>
<ul class="sub-menu">
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-243"><a href="http://www.test.com/demo/sub-option-page-1/">Sub Option Page 1</a></li>
    <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="http://www.test.com/demo/sub-option-page-2/">Sub Option Page 2</a>
    <ul class="sub-menu">
        <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="http://www.test.com/demo/sub-sub-option-1/">Sub Sub Option 1</a></li>
    </ul>
</li>
</ul>
</li>
</ul></nav>    </div>
</header>
</body>

CSS

ul, li{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } 

.nav-bar {
    background: #008752;
    height: 50px;
    box-shadow: 2px 2px 3px #333;   
}

.main-nav ul, .main-nav li{
    display: inline
}

.main-nav a {
    padding: 0 20px 0 20px;
    text-decoration: none;
    line-height: 50px;
    color: white;
    display: block;
}

.main-nav a:hover {
    background:#00FFFB;
    color: black;   
}


.main-nav ul li {
    position: relative; 
    float: left;
}

.main-nav ul ul {
    position: absolute;
    top: -99999px;
    left: 0;
    opacity: 0; 
    background: #037A5A;
    text-align: left;
    box-shadow: 2px 2px 3px #BFBFBF;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;

}

.main-nav ul ul a {
    width: 135px;
    line-height: 40px;
    padding: 0 20px;
    display:block;  
}

.main-nav ul li:hover > ul {
    position: absolute;
    top: 100%;
    opacity: 1;
    z-index: 99999;
}

.main-nav ul ul ul {
    background:#830002; 
    text-align: left;
}

.main-nav ul ul ul a {
    width: 135px;
    line-height: 40px;
    padding: 0 20px;
    display: block; 
}

.main-nav ul ul ul a:hover {
    background:#1041A3;
    color: white;
}   

.main-nav ul ul li:hover > ul {
    position: absolute;
    top: 100%;
    left: 170px;
}

http://jsfiddle.net/Y24p5/1/

最佳答案

您只需要在 .main-nav ul ul li:hover > ul 上调整几个样式。

.main-nav ul ul li:hover > ul {
  position: absolute;
  top: 0;
  left: 100%;
}

这会将其设置在其父级左侧的 100%，并与其父级的顶部内联。

DEMO

关于html - 简单的 "Sub Sub"选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20624948/

29 4 0
文章推荐： php - 在不使用标题的情况下使用 PHP 调整图像大小
文章推荐： java - Eclipse JDT中ActiveEditor的UndoContext
文章推荐： java - 使用 Criteria 和 Metamodel API 连接多个外键上的两个表
文章推荐： c++ - 在 "equivalent"QPixmap 上绘制 QGraphicItems 的最快方法
太空宇宙
个人简介

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

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