Простой вариант «Sub Sub»

Question

Простой вариант «Sub Sub»

0

Я создал простую навигацию с двумя уровнями подменю. Я ищу опцию "sub sub", которая отображается справа от ее родителя, а не ниже. Я был бы признателен за любую помощь в 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/

user2325396 17 дек. 2013, в 04:22

Источник

0

Привет PSL, спасибо за ответ и да, конечный результат такой, как я хотел. Я должен был упомянуть об этом в своем первоначальном вопросе, но я надеялся на решение, которое не включало бы ручное добавление классов в опции «sub sub», поскольку эти меню динамически генерировались в WP. Решение, представленное DavidPaulJunior, работает идеально, поскольку никаких дополнительных классов не требуется. Спасибо, тем не менее :)
user2325396 17 дек. 2013, в 05:57

Теги:

html

css

1 ответ

Ещё вопросы

Привет PSL, спасибо за ответ и да, конечный результат такой, как я хотел. Я должен был упомянуть об этом в своем первоначальном вопросе, но я надеялся на решение, которое не включало бы ручное добавление классов в опции «sub sub», поскольку эти меню динамически генерировались в WP. Решение, представленное DavidPaulJunior, работает идеально, поскольку никаких дополнительных классов не требуется. Спасибо, тем не менее :)

davidpauljunior · Accepted Answer · 2013-12-16T23-57-00.000Z

Вам просто нужно настроить несколько стилей на .main-nav ul ul li:hover > ul.

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

Это установит его на 100% слева от него родительским и встроит в верхнюю часть его родителя.

DEMO

Качество и скорость поддержки на этом форуме не перестают удивлять. Это идеальное решение. Спасибо DavidPaulJunior!