У меня есть меню навигации на веб-сайте 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;
}
Обновление Изменение моего css на:
Затем я возвращаюсь к исходной проблеме, поскольку фон подчеркивает мою проблему, что подменю должно быть "прикреплено" к элементу, из которого вы наводите мышь, чтобы вы могли перемещать мышь из главного меню в подменю без меню исчезает.
попробуй это...
.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/
Я считаю, что неупорядоченный список и контейнер подменю равны, а не один, вложенный в другой, упростит ситуацию. Вот полный пример того, как я это сделаю, обратите внимание на #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;
}
внесите следующие изменения. Я думаю, это то, что вы искали.
#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*/
}
пожалуйста, прокомментируйте дополнительную информацию или сообщите мне, если это то, что вы хотели. Надеюсь, это поможет Пиппе Роуз Смит. благодаря