Растянуть вспомогательную навигационную панель по ширине страницы при наведении

0

У меня есть меню навигации на веб-сайте wordpress с подменю для определенных элементов.

<nav>
    <div class="nav_container">
        <ul id="menu-header-menu" class="menu">
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-36">
                <a href="...">Cottages</a>

                <div id="sub_menu_container">
                    <ul class="sub-menu">
                        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-46 current_page_item menu-item-51">
                            <a href="...">Cottage 1</a>
                        </li>

                        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
                            <a href="...">Cottage 2</a>
                        </li>
                    </ul>
                </div>
            </li>

            ...more li elements etc 
        </ul>
    </div>
</nav>

Элементы меню сосредоточены на странице, но фон навигатора простирается на ширину страницы.

Проблема, с которой я столкнулась, заключается в том, что дизайн навигатора таков, что элементы подменю отображаются непосредственно под первым навигационным устройством, с элементами меню непосредственно под элементом родительского меню, но при этом фон также растягивается по ширине страницы.

Учитывая, что я использую относительные и абсолютные позиции и учитывая, что элементы главного меню сосредоточены на странице, а их фон простирается по ширине страницы (я делаю это с использованием div с определенной шириной) подменю, когда оно имеет ширину 100%, это только ширина div, которая центрирует элементы главного меню.

Вероятно, стоит также сказать, что мне удалось добиться желаемого внешнего вида без использования относительного и абсолютного положения, но это означало, что подменю не было "прикреплено" к главному меню, и мышь покинула область зависания, пытаясь добраться до подменю, которое затем исчезла, поэтому ее невозможно было достичь, пока она не исчезла.

Я прикрепил образ того, что я делаю, чтобы сделать его более ясным, и я также присоединяюсь к текущему css, который у меня есть.

.nav_container
{
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;

    width: 1055px;
}

nav
{
    width: 100%;
height: 40px;

    background: #685c53;
    -moz-box-shadow: inset 0 0 3px 3px #37332e;
    -webkit-box-shadow: inset 0 0 3px 3px #37332e;
    box-shadow: inset 0 0 3px 3px #37332e;  

    position: relative;
}

nav ul
{
    margin: 0;
    padding: 0;

    display: inline;
}

nav li
{
    display: inline;
    padding: 8px 9px;
}

#sub_menu_container
{
    display: none;

    float: left;

    position: absolute; 
    top: 0;

    padding-top: 40px;

    width: 100%;
}

nav ul .sub-menu
{
    text-align: center;

    width: 100%;
    height: 30px;

    background: #b3a797;

    -moz-box-shadow: inset 0 0 3px 3px #685c53;
    -webkit-box-shadow: inset 0 0 3px 3px #685c53;
    box-shadow: inset 0 0 3px 3px #685c53;  
}

nav ul li:hover > #sub_menu_container
{
    display: block;
}

.sub-menu li 
{
    display: inline-block;

    margin-top: 0px;
    padding-bottom: 2px;
    margin-bottom: 0px;
    padding-top: 5px;

    padding-left: 10px;

    border-right: 1px solid #000;
}

Изображение 174551

Обновление Изменение моего css на:

Затем я возвращаюсь к исходной проблеме, поскольку фон подчеркивает мою проблему, что подменю должно быть "прикреплено" к элементу, из которого вы наводите мышь, чтобы вы могли перемещать мышь из главного меню в подменю без меню исчезает.

Изображение 174551

Теги:
hover
nav

3 ответа

0

попробуй это...

.sub-menu li 
{
display: inline-block;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 10px;
border-right: 1px solid #000;
}

Пожалуйста, прокомментируйте, если это не то, что вы хотели бы. Проверьте скрипту по адресу http://jsfiddle.net/gq2fM/

Поделиться
0

Я считаю, что неупорядоченный список и контейнер подменю равны, а не один, вложенный в другой, упростит ситуацию. Вот полный пример того, как я это сделаю, обратите внимание на #sub.

<nav>
  <ul>
    <li>Cheeses
      <div id='sub'></div>
      <ul>
        <li>Opt1</li>
        <li>Opt2</li>
        <li>Opt3</li>
      </ul>
    </li>
    <li>Paper clips
      <div id='sub'></div>
      <ul>
        <li>Opt1</li>
        <li>Opt2</li>
        <li>Opt3</li>
      </ul>
    </li>
    <li>Swords
      <div id='sub'></div>
      <ul>
        <li>Opt1</li>
        <li>Opt2</li>
        <li>Opt3</li>
      </ul>
    </li>
  </ul>
</nav>


*{
  margin:0px;
  padding:0px;
}

nav{
  background:green;
}

ul{
  display:flex;
}

li{
  display:inline;
  margin:auto;
}

li>ul{
  display:none;
  position:absolute;
}

li:hover>ul{
  display:inline;
}

#sub{
  background:blue;
  display:none;
  height:1.5em;
  left:0px;
  position:absolute;
  width:100vw;
}

li:hover>#sub{
  display:block;
}
Поделиться
  • 0
    Спасибо, но я немного скован макетом HTML панели навигации WordPress.
0

внесите следующие изменения. Я думаю, это то, что вы искали.

#sub_menu_container
{
display: none;
float: left;
position: absolute; 
top:;
left:0px;
padding-top: 10px;
width: 100%;
background-color:black;/*this is for testing purposes*/
}

пожалуйста, прокомментируйте дополнительную информацию или сообщите мне, если это то, что вы хотели. Надеюсь, это поможет Пиппе Роуз Смит. благодаря

Поделиться
  • 0
    На самом деле, из своего первоначального восторга я понял, что возвращает меня к той же проблеме, что и раньше. Я обновлю вопрос обновленным изображением, чтобы вы могли увидеть проблему.
  • 0
    Я обновил вопросы. Как вы можете видеть, я не могу заставить суб-навигацию запускаться непосредственно под основным фоном навигации, она должна начинаться непосредственно под основным текстом навигации, чтобы я мог переходить от одного к другому без исчезновения подменю. Кроме того, текст должен находиться под основным элементом навигации, с которого он пришел
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню