Hi,

I am looking at Mac Accessories - Apple Store (U.S.)

In particular the left navigation bar. I can see the left navigation bar is done with JavaScript. However I would like to do something like this using only CSS, PHP, MySQL. I know how to get a list of words, using <li> tags and how to get the background and text to change colour when clicked/hovered over. I do not know how to get the border around parts of the navigation bar (in the apple site there are 2 separate left navigation bars) and how to give the border curved corners.

I am aware of different methods to add backgrounds and borders when inputting text within an area - indeed i have discussed it here at SitePoint Web Design, Web Development, Freelancing, Tech News and more. But it looks to me as though the navigation bar will need to be more than just a background with a border to get the effect!?

This is the coding of the apple web site:

PHP Code:
<div class="box store-navigation" aria-label="Apple Store" role="navigation">
<
div class="title-bar">
<
h2Departments </h2>
</
div>
<
div class="box-content clearfix">
<
ul class="departments">
<
li>
<
a onclick="s_objectID='MTM3NDcyMzk';" href="/us/browse/home/shop_mac?mco=MTM3NDcyMzk">Shop Mac</a>
</
li>
<
li>
<
a onclick="s_objectID='MTM3NDcyNDY';" href="/us/browse/home/shop_ipod?mco=MTM3NDcyNDY">Shop iPod</a>
</
li>
<
li>
<
a onclick="s_objectID='MTM3NTA3MTI';" href="/us/browse/home/shop_iphone?mco=MTM3NTA3MTI">Shop iPhone</a>
</
li>
<
li>
<
a onclick="s_objectID='MTcyMTgxNTY';" href="/us/browse/home/shop_ipad?mco=MTcyMTgxNTY">Shop iPad</a>
</
li>
</
ul
Matt.