/*The first things you want to do are remove the default bullets and zero down the margin andpadding:*/ul.nav {margin: 0;padding: 0;list-style-type: none;}/*You can then start layering on the graphical styling. In this case, I’m giving my navigation menu alight green background and a dark green border. I’m also going to set the width of my navigate listin ems.*/ul.nav {margin: 0;padding: 0;list-style-type: none;width: 8em;background-color: #8BD400;border: 1px solid #486B02;}/*Rather than style the list items, styling the enclosed anchor links provides better cross-browsercompatibility. To create a button-like hit area, you simply set the display property of the anchorsto block. The anchor links will then expand to take up the available space, which in this case isdetermined by the width of the list. You could set the width of the anchors explicitly, but I’ve foundsetting the width of the parent list makes for more maintainable code. The last couple of rules arejust stylistic, setting the color of the link text and turning off the underlines.*/ul.nav a {display: block;color: #2B3F00;text-decoration: none;}/*To create the beveled effect on the menu items, you need to set the top border to be lighter thanthe background color and the bottom border slightly darker. At this point, you can also drop in abackground image to use as an icon.hint:Ideally, I would have set the positioning of my arrow to be 10 pixels from theleft-hand edge of the anchor. However, the CSS specification doesn’t allow themixing of units, so I’ve used a percentage instead. In reality, most browsersaccept mixed units, and I think this is one of several instances where thespecification is wrong;*/ul.nav a {display: block;color: #2B3F00;text-decoration: none;border-top: 1px solid #E4FFD3;border-bottom: 1px solid #486B02;background: url(./img/arrow.gif) no-repeat 5% 50%;padding: 0.3em 1em;}/*With all the borders stacked one on top of the other, you’ll notice that the bottom border on thefinal link doubles up with the bottom border on the list. In this instance, I’m going to take thesimple option and remove the bottom border from the list. However in situations where this isn’tpossible, the addition of a class on the first or last list item can allow you to remove the borderdirectly. In the future, you’ll also be able to use the :last-child pseudo class, but for the timebeing, browser support is limited.*/ul.nav .last a {border-bottom: 0;}/*The list now looks like a stylish vertical navigation bar. To complete the effect, the last thing youneed to do is apply the :hover, :focus, and :selected states. To do this, simply change thebackground and text colors. You could also experiment with changing the border colors to createa depressed button type effect. These styles are applied to the anchor links when the user hoversover them. They are also applied to any anchors that have a class of selected applied to theirparent list item.*/ul.nav a:hover,ul.nav a:focus,ul.nav .selected a {color: #E4FFD3;background-color: #6DA203;}/*This technique should now work in all the major browsers except IE 6 and below for Windows.Unfortunately, IE6 inexplicably adds extra space above and below the list items. To fix this bug,you need to set the display property on the list items to inline:*/ul.nav li {display: inline: /* :KLUDGE: Removes large gaps in IE/Win */}/*And there you have it: a styled vertical nav bar, complete with rollovers.*/
      
       
        
         Home1
        
       
        
         About
        
       
        
         Our Services
        
       
        
         Our Work
        
       
        
         News
        
       
        
         Contact
        
       
AHA
       
        AHA