Home/ Questions/Q 7589593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:12:00+00:00

Imagine you have two adjacent columns. The first (left most) is the primary navigation

  • 0

Imagine you have two adjacent columns. The first (left most) is the primary navigation and the second is the secondary navigation. To the right of these is the actual content.

I have links in both columns as unordered lists. The selected links in each are highlighted by changing the background colour. The final part of the design is that the selected items needs to ‘stickout’ on the right hand side with a pointed arrow design (for which I have been provided an image for).

This is what I am having trouble with. I need to position an image to the very right of the PrimaryNavigationSelected. I am trying to extend the li element beyond it’s parent borders and attach the arrow image as background. Is this the best way to do this? Can you make an li element extend beyond the borders of its parent?

The system is for a help like system that will be using an embedded IE7 control but the design is planned to be used eventually for the online help.

Code below: Note – the SecondaryNavigation is similar to Primary except for a change in colours and I don’t feel comfortable posting over 160 lines of CSS. If you can show how to do it to the primary navigation I could make that extend to secondary.

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Managed to get it working.

    Firstly the environment it will end up in is an IE7 control so I had to add 

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    To get the code to work in IE7 after I managed to get it working in IE8.

    For IE8 I needed to add the following to PrimaryNavigationSelected:

    padding-right: 8px; 
right: -8px; 
margin-left: -8px; 
color: #FFFFFF;
background: transparent url(arrow.png) 100% 50% no-repeat;

    But for IE7 you need to remove the right and margin-left properties.

    Strange, but true.

    • 0