Представьте, что у вас есть две соседние колонки.Первая (самая левая) - это основная навигация, а вторая - вторичная навигация.Справа от них - фактическое содержание.
У меня есть ссылки в обоих столбцах как неупорядоченные списки.Выбранные ссылки в каждой будут выделены путем изменения цвета фона.Финальная часть дизайна заключается в том, что выбранные элементы должны «высовываться» с правой стороны с дизайном заостренной стрелки (для которого мне было предоставлено изображение).
Это то, что у меня естьпроблемы с.Мне нужно расположить изображение справа от PrimaryNavigationSelected.Я пытаюсь расширить элемент li за пределы родительских границ и прикрепить изображение стрелки в качестве фона. Это лучший способ сделать это?Можете ли вы сделать так, чтобы элемент li выходил за пределы родительского элемента?
Система предназначена для справочной системы, которая будет использовать встроенный элемент управления IE7, но в конечном итоге планируется использовать ее дляинтерактивная справка.
Код ниже: Примечание. SecondaryNavigation похожа на Primary, за исключением изменения цвета, и мне неудобно размещать более 160 строк CSS.Если вы можете показать, как сделать это с первичной навигацией, я могу сделать так, чтобы она распространялась на вторичную.
HTML
<body>
<div id="PrimaryNavigation">
<ul>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationSelected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
</ul>
</div>
<div id="SecondaryNavigation">
<ul>
<li class="SecondaryNavigationSelected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
</ul>
</div>
CSS
#PrimaryNavigation {
position: absolute;
height: 100%;
width: 20%;
background-color: #2BB1E4;
}
#PrimaryNavigation * {
position: relative;
margin: 0;
padding: 0;
}
#PrimaryNavigation ul {
list-style-type: none;
padding: 44px 0 0 0;
}
#PrimaryNavigation li {
padding: .2em 0;
padding-left: 1em;
margin-bottom: 1em;
}
#PrimaryNavigation a {
color: white;
text-decoration:none;
}
.PrimaryNavigationDeselected {
color: #FFFFFF;
}
.PrimaryNavigationDeselected:hover {
color: #FFFFFF;
}
.PrimaryNavigationSelected {
margin: 1em;
color: #FFFFFF;
background-color: #0079A7;
}
.PrimaryNavigationSelected:hover {
color: #FFFFFF;
background-color: #0079A7;
}