Pure Css Menu Links

[sapphy8]

Hi I am a fairly new to web design and have taught myself over the last year to use Microsoft Expression web and gain some understanding of CSS, which I think is brilliant. I have designed a website for my office, in a fluid design and used a pure css menu. The menu works fine when in a test site of it's own with only a few pages. But when I transfer the css menu code to my otherwise complete and working fine website the menu links only work if I click on the Word in the tab/menu link or at the very bottom right corner? I have used <span> either side of the link-word in the html code but this doesn't seem to help other than to make the whole word clickable but not the entire menu block that the word sits in. I have the website in a holding website at the moment so that I can test it, the link to this website is www.abbeyread.webspace.virginmedia.com I have gone around in circles and spent hours trying to find a fix to this but without success. I've posted the css code below. the #nav div gives a continuous blue background to the menu bar so that when it's displayed in a wide 22" large screen the menu bar stretches across the whole screen but also fits properly in a smaller screen 1024x768, using Internet Explorer 8. The links have the same problem in Safari, Firefox and Internet Explorer 9 and 8. Any help would really be appreciated. Thanks for taking the time to read this, I hope it's clear and that you can point me in the right direction! #nav {height: 38px;background-color: #000080;} ul{ margin:0px; padding:0px; }ul li{border-right-style: solid;border-right-width: 1px;border-right-color: #C0C0C0;font-family: "Times New Roman", Times, serif;text-transform: uppercase;text-align: center;font-size: 0.85em;display: inline;width: 120px;height:38px;list-style-type: none;float: left;color: #000080;}ul li a{background-color: #000080;color: #FFFFFF;text-decoration: none;line-height: 38px;width: 115px;display: block;padding-left: 5px;}ul li a:hover{background-color: #FFFFFF;color: #000080;}ul li ul li a{border-style: solid;border-width: thin;color: #000080;background-color: #E6E6E6;text-align: left;text-transform: capitalize;font-size: 1.2em;}ul li ul li a:hover{background-color: #FFFFFF;}ul li ul{visibility: hidden;}ul li:hover ul{visibility: visible;

[Alluring]

I see what you have there. It’s a good idea but I have a few suggestions. You mentioned that you are making a “pure” CSS menu, but are you using Spry or a .js script at all? I would need to see those also to really work out a solution. However, I believe you may want to take a more direct and simplified approach to this. It will save you some headaches and stress. Try considering a simplified nav system that has a drop down menu or each section-page has the sub pages listed in a column somewhere and use bread crumbs. I understand re-catagorizing the pages may not be an option or way too much work but it could help out in the long run. Here’s my proposal: Home | About Us | Services | Resources | Contact The other sub-categories would fall under these. Tax centre is already a given being that the site is for a tax accountant and client’s zone; I should think the site as a whole is a zone for clients. Links can find a place in Resources also. The drop down part of the menu I'd have to look at further so I'd need to see all the code for that but from the looks of it, I'd say it's a rollover state that has sizing and placement issues. I have to bring this up also. The layout looks good. It’s clean and easy to look at. However, when you resize the screen your nav goes to heck. Sorry to break that, but it’s an issue being that we don’t know what the viewer size is going to be. Post your HTML and any further scripts and I’ll take a look at them and hopefully get the nav to 100%. -Grahamalluringmedia.net

[sapphy8]

Hi and thanks very much for your detailed response. I will try to answer in the order of your paras. I am not using Spry or .js script. I have shown below (with the html for the menu) the styles applied to the drop down menus. These set the drop downs below the top navigation items. As for the layout, not my choice! My boss wants the menu exactly as it is - but working of course! So I can't change the layout of that. The sizing issue: I have designed the screen to work on 3 sizes up from and including 1024-768 with Internet Explorer 8 and up to 1440 x 900 and Internet Explorer 9. As I said I am very new to web design so if that's not what you mean by the sizing issue, perhaps you would explain briefly and what I should do to correct this problem? I assume you wanted the html just for the menu? I have included this below, together with the styling for the drop downs below. I am very appreciative of your help with this and thank you for taking the time to help a very keen to learn new web designer. I have searched books and online to find the answers to the problems that I am facing but although I have tried numerous suggestions I haven't found a conclusive answer, so thanks again for helping me. <div id="nav"><ul> <li><a title="Welcome page" href="index.html"><span>Home</span></a></li> <li><a title="Who we are" href="about.html"><span>About Us</span></a> <ul style="z-index: 1" class="auto-style7"> <li><span><a title="Our Team" href="ourteam.html">Our Team</a></span></li> <li><a title="What our clients say about us" href="testimonials.html"><span>Testimonials</span></a></li> <li><a title="Opportunities at Abbey" href="careers.html"><span>Careers</span></a></li> </ul></li> <li><a title="Services we provide to you" href="services.html"><span> Services </span></a> <ul style="z-index: 1" class="auto-style6"> <li><a title="Services to individuals" href="individuals.html"><span> To Individuals </span></a></li> <li><a title="Services to business startups" href="businessstart.html"><span> Business startups </span></a></li> <li><a title="Services to the sole trader" href="soletrader.html"><span>To Sole Trader</span></a></li> <li><a title="Services to partnerships" href="partnerships.html"><span>To Partnerships</span></a></li> <li><a title="Services to llps" href="llp.html"><span>To LLPs</span></a></li> <li><a title="Services to companies" href="companies.html"><span>To Companies</span></a></li> <li><a title="Services to IR35 businesses" href="ir35.html"><span>IR35</span></a></li> <li><a title="Services to CIS businesses" href="cis.html"><span> CIS </span></a></li> <li><a title="Tax investigation" href="taxinvestig.html"><span>Tax Investigations</span></a></li> <li><a title="Cross border details" href="crossborder.html"><span>Cross Border</span></a></li> </ul></li> <li><a title="Client information"href="clients.html"><span>Clients' Zone</span></a></li> <li><a title="Tax resources" href="Resources.html"><span>Resources</span></a> <ul style="z-index: 1" class="auto-style11"> <li><a title="Tax rates and allowances" href="taxratesallow.html"><span>Rates/Allowances</span></a></li> <li><a title="Tax calculators" href="taxcalcs.html"><span>Online Calculators</span></a></li> <li><a title="HMRC forms" href="hmrcforms.html"><span> HMRC Forms </span></a></li> <li><a title="Useful tax dates" href="taxcalen.html"><span>Tax Calendar</span></a></li> <li><a title="Tax helpsheets" href="taxhelpsheets.html">T<span>ax Helpsheets</span></a></li> <li><a title="Useful tax reports" href="taxreports.html"><span>Tax Reports</span></a></li> </ul></li> <li><a title="tax information centre" href="taxcent.html"><span>Tax Centre</span></a> <ul style="z-index: 1" class="auto-style20"> <li><a title="Tax news centre" href="taxnewscentre.html"><span>Tax News</span></a></li> <li><a title="Budget news" href="budget.html"><span>The Budget</span></a></li> </ul></li> <li><a title="Useful business links" href="links.html"><span>Links</span></a></li> <li><a title="contact us your way" href="contactus.html"><span>Contact us</span></a></li> </ul> </div> Styling applied to the drop down menus}.auto-style6 { width: 138px; height: 140px; position: absolute; top: 215px; left: 250px;}.auto-style7 { width: 120px; height: 125px; position: absolute; top: 215px; left: 129px; text-align: left;}.auto-style11 { width: 138px; height: 77px; position: absolute; top: 215px; left: 492px;}.auto-style20 { width: 138px; top: 215px; height: 77px; left: 612px; position: absolute;