Question

我创建了一个包含2级子菜单的简单导航。我正在寻找显示在其父级右侧而不是下方的“子级”选项。我很感激CSS的任何帮助。 html和css下面还有JS小提琴链接。

提前谢谢大家，

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/

Answer 1

您只需在.main-nav ul ul li:hover > ul上调整几种风格。

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

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

<强> DEMO

简单的“Sub Sub”选项

1 个答案: