Ran into this website by mere coincidence and it so happens I could use some assistance with some layout problem.
I am trying to get rid of the blue area because right now it looks like it’s a double menu. When you hover your mouse over the links, you’d get the submenu; however, if you place your mouse in the blue section – you’d also get the submenus.
I have tried all I can think of but I think it’s time for some outside assistance and maybe some opinions.
Thanks in advance for any assistance anyone could provide.
Hello :). Use this HTML. The reason is because you’re moving the <div>'s down (a child of the <li>'s) with position:relative and top:20 some pixels. That only moves the document visually. I chose this over just c hanging it to margin-top becuase you can remove ALL the divs in your HTML. Like, you have <li><div> etc for each top level menu item. You can remove that div. Place the classes and ID’s on the <li> instead and you save an element :).
<body>
<!-- Global Navigation -->
<div id="nav">
<ul class="sf-menu">
<li>
<div id="nav_home" class="nav_main_links"><a href="/"><span id="nav_home_span">Home</span></a></div>
</li>
<!-- / Home -->
<li id="nav_aboutclive" class="nav_main_links">
<div><a href="/main/abo/"><span id="nav_aboutclive_span">About Clive</span></a></div>
<ul><br />
<li><a href="/main/abo/history.overview.php">History and Overview of Clive</a></li>
<li><a href="/main/abo/financesbudget/index.php">Finances and Budget</a>
<ul>
<li><a href="/main/abo/financesbudget/capital.improvement.plan.php">Capital Improvements Plan</a></li>
<li><a href="/main/abo/financesbudget/city.budget.php">City Budget</a></li>
<li><a href="/main/abo/financesbudget/taxes.levies.php">Taxes and Levies</a></li>
</ul>
</li>
<li><a href="/main/abo/city.newsletter.php">City Newsletter</a></li>
<li><a href="/main/abo/public.notices.php">Public Notices</a></li>
<li><a href="/main/abo/city.maps.php">City Maps</a></li>
<li><a href="/main/abo/city.record.documents.php">City Records and Documents</a></li>
<li><a href="/main/abo/clive.strategic.plan.php">Clive Strategic Plan</a></li>
<li><a href="/main/abo/citizen.satisfaction.survey.php">Citizen Satisfaction Survey</a></li>
</ul>
</li>
<!-- / About Clive -->
<li id="nav_iwantto" class="nav_main_links">
<div><a href="/main/iwa/"><span id="nav_iwantto_span">I want to...</span></a></div>
<ul><br />
<li><a href="/main/iwa/applyfor/index.php">Apply for</a>
<ul>
<li><a href="/main/iwa/applyfor/city.boards.commissions.php">City Boards and Commissions</a></li>
<li><a href="/main/iwa/applyfor/volunteer.opportunities.php">Volunteer Opportunities</a></li>
<li><a href="/main/iwa/applyfor/city.jobs.php">City Jobs</a></li>
<li><a href="/main/iwa/applyfor/permits.php">Permits</a></li>
</ul>
</li>
<li><a href="/main/iwa/listento/index.php">Listen to</a>
<ul>
<li><a href="/main/iwa/listento/audio.city.council.php">Audio from City Council</a></li>
<li><a href="/main/iwa/listento/audio.planning.zoning.php">Audio from Planning and Zoning</a></li>
<li><a href="/main/iwa/listento/audio.board.adjustment.php">Audio from Board of Adjustment</a></li>
</ul>
</li>
<li><a href="/main/iwa/payfor/index.php">Pay for</a>
<ul>
<li><a href="/main/iwa/payfor/library.fines.php">Library Fines</a></li>
<li><a href="/main/iwa/payfor/pet.license.php">Pet License</a></li>
<li><a href="/main/iwa/payfor/property.tax.php">Property Tax</a></li>
<li><a href="/main/iwa/payfor/recreation.program.fees.php">Recreation Program Fees</a></li>
<li><a href="/main/iwa/payfor/red.light.violation.php">Red Light Violation</a></li>
<li><a href="/main/iwa/payfor/utillity.ach.php" target="_new">Utility Bill by ACH</a></li>
<li><a href="/main/iwa/payfor/utility.bill.online.php">Utility Bill Online</a></li>
</ul>
</li>
<li><a href="/main/iwa/request/index.php">Request</a>
<ul>
<li><a href="/main/iwa/request/street.light.repair.php">Street Light Repairs</a></li>
<li><a href="/main/iwa/request/inspection.building.projects.php">Inspection for Building Projects</a></li>
<li><a href="/main/iwa/request/no.mosquito.spraying.php">No Mosquito Sprayinig</a></li>
</ul>
</li>
<li><a href="/main/iwa/signupfor/index.php">Sign Up for</a>
<ul>
<li><a href="/main/iwa/signupfor/garbage.recycliing.php">Garbage and Recycling</a></li>
<li><a href="/main/iwa/signupfor/rental.facilities.php">Rental Facilities</a></li>
<li><a href="/main/iwa/signupfor/enotify.php">E-Notify</a></li>
<li><a href="/main/iwa/signupfor/emergency.phone.notifications.php">Emergency Phone Notifications</a></li>
<li><a href="/main/iwa/signupfor/library.newsletter.php">Library Newsletter</a></li>
<li><a href="/main/iwa/signupfor/library.programs.php">Library Programs</a></li>
<li><a href="/main/iwa/signupfor/new.resident.services.php">New Resident Services</a></li>
<li><a href="/main/iwa/signupfor/recreation.programs.php">Recreation Programs</a></li>
</ul>
</li>
<li><a href="/main/iwa/contact/index.php">Contact</a>
<ul>
<li><a href="/main/gov/mayor.php">Mayor</a></li>
<li><a href="/main/gov/city.council.php">City Council</a></li>
<li><a href="/main/iwa/contact/city.staff.php">City Staff</a></li>
</ul>
</li>
<li><a href="/main/bus/report.city.code.violation.php">Report a City Code Violation</a></li>
<li><a href="/main/res/view.league.schedules.standings.php">View League Schedules and Standings</a></li>
</ul>
</li>
<!-- / I Want To -->
<li id="nav_residents" class="nav_main_links">
<div><a href="/main/res/"><span id="nav_residents_span">Residents</span></a></div>
<ul>
<br />
<li><a href="/main/res/voters.registration.precincts.php">Voters Registration and Precincts</a></li>
<li><a href="/main/res/info.referrals.community.services.php">Info and Referrals for Community Services</a></li>
<li><a href="/main/res/public.art.program.php">Public Art Program</a></li>
<li><a href="/main/res/resident.guide.php">Resident Guide</a></li>
<li><a href="/main/res/schools.php">Schools</a></li>
<li><a href="/main/res/utilities.php">Utilities</a></li>
<li><a href="/main/res/healthsafety/index.php">Health and Safety</a>
<ul>
<li><a href="/main/gov/police/crime.mapping.php">Crime Mapping</a></li>
<li><a href="/main/gov/police/westcom.php">E911 Dispatch - Westcom</a></li>
<li><a href="/main/gov/fire/emergency.text.email.alerts.php">Emergency Text and Email Alerts</a></li>
<li><a href="/main/gov/fire/fire.safety.php">Fire Safety</a></li>
<li><a href="/main/gov/police/neighborhood.traffic.management.php">Neighborhood Traffic Management</a></li>
</ul>
</li>
<li><a href="/main/gov/library/">Library</a></li>
<li><a href="/main/gov/parksrecreation/aquatic.center.php">Aquatic Center</a></li>
<li><a href="/main/gov/parksrecreation/parks.shelters.trails.php">Parks Shelters and Trails</a></li>
<li><a href="/main/applyfor/permits.php">Permits and Licensing</a></li>
</ul>
</li>
<!-- / Residents -->
<li id="nav_businesses" class="nav_main_links">
<div><a href="/main/bus/"><span id="nav_businesses_span">Businesses</span></a></div>
<ul>
<li><a href="/main/bus/buildingdevelopingproperties/">Building/Developing Properties</a>
<ul>
<li><a href="/main/bus/buildingdevelopingproperties/comprehensive.plans.php">Comprehensive Plans</a></li>
<li><a href="/main/bus/buildingdevelopingproperties/current.projects.php">Current Projects</a></li>
<li><a href="/main/gov/fire/fire.safety.php">Fire Safety</a></li>
<li><a href="/main/gov/fire/hydrant.meters.php">Hydrant Meters</a></li>
<li><a href="/main/bus/buildingdevelopingproperties/traffic.count.php">Traffic Count</a></li>
<li><a href="/main/bus/buildingdevelopingproperties/building.reports.php">Building Reports</a></li>
</ul>
</li>
<li><a href="/main/bus/permits/index.php">Permits</a>
<ul>
<li><a href="/main/bus/permits/building.php">Building</a></li>
<li><a href="/main/bus/permits/liquor.beer.php">Liquor/Beer</a></li>
<li><a href="/main/bus/permits/noise.php">Noise</a></li>
<li><a href="/main/bus/permits/outdoor.event.php">Outdoor Event</a></li>
<li><a href="/main/bus/permits/temporary.site.plan.php">Sales/Temporary Site Plan</a></li>
<li><a href="/main/bus/permits/sign.php">Sign</a></li>
<li><a href="/main/bus/permits/solicitor.php">Solicitor</a></li>
</ul>
</li>
<li><a href="/main/bus/report.city.code.violation.php">Report a City Code Violation</a></li>
<li><a href="/main/bus/economicdevelopment/">Economic Development</a>
<ul>
<li><a href="/main/bus/economicdevelopment/available.sites.buildings.php">Available Sites and Buildings (LOIS)</a></li>
<li><a href="/main/bus/economicdevelopment/business.parks.projects.php">Business Parks and Projects</a></li>
<li><a href="/main/bus/economicdevelopment/community.data.php">Community Data</a></li>
<li><a href="/main/bus/economicdevelopment/community.profile.php">Community Profile</a></li>
<li><a href="/main/bus/economicdevelopment/financial.incentives.php">Financial Incentives</a></li>
<li><a href="/main/bus/economicdevelopment/newsletter.php">Newsletter</a></li>
<li><a href="/main/bus/economicdevelopment/contact.city.php">Contact City</a></li>
<li><a href="/main/bus/economicdevelopment/transportation.php">Transportation</a></li>
<li><a href="/main/bus/economicdevelopment/utilities.php">Utilities</a></li>
<li><a href="/main/bus/economicdevelopment/workforce.php">Workforce</a></li>
</ul>
</li>
</ul>
</li>
<!-- / Businesses -->
<li id="nav_visitors" class="nav_main_links">
<div><a href="/main/vis/"><span id="nav_visitors_span">Visitors</span></a></div>
<ul>
<br />
<li><a href="/main/gov/parksrecreation/aquatic.center.php">Aquatic Center</a></li>
<li><a href="/main/vis/employers.php">Employers</a></li>
<li><a href="/main/abo/history.overview.php">History and Overview of Clive</a></li>
<li><a href="/main/vis/lodging.restaurants.php">Lodging and Restaurants</a></li>
<li><a href="/main/gov/parksrecreation/parks.shelters.trails.php">Parks Shelters and Trails</a></li>
<li><a href="/main/iwa/signupfor/rental.facilities.php">Rental Facilities</a></li>
<li><a href="/main/vis/where.clive.php">Where is Clive?</a></li>
</ul>
</li>
<!-- / Visitors -->
<li id="nav_government" class="nav_main_links">
<div><a href="/main/gov/"><span id="nav_government_span">Government</span></a></div>
<ul>
<br />
<li>
<li><a href="/main/gov/mayor.php">Mayor</a></li>
<li><a href="/main/gov/city.council.php">City Council</a></li>
<li><a href="/main/gov/boardscommissions/index.php">Boards and Commissions</a>
<ul>
<li><a href="/main/gov/boardscommissions/board.adjustment.php">Board of Adjustment</a></li>
<li><a href="/main/gov/boardscommissions/civil.service.commissions.php">Civil Service Commissions</a></li>
<li><a href="/main/gov/boardscommissions/library.board.php">Library Board</a></li>
<li><a href="/main/gov/boardscommissions/parks.board.php">Parks Board</a></li>
<li><a href="/main/gov/boardscommissions/planning.zoning.commission.php">Planning and Zoning Commission</a></li>
<li><a href="/main/gov/boardscommissions/public.arts.advisory.commission.php">Public Arts Advisory Commission</a></li>
</ul>
</li>
<li><a href="/main/gov/city.state.code.php">City and State Code</a></li>
<li><a href="/main/gov/cityservices/">City Services</a></li>
<li><a href="/main/gov/cityadministration/">City Administration</a></li>
<li><a href="/main/gov/communitydevelopment/">Community Development</a></li>
<li><a href="/main/gov/fireems/">Fire and EMS</a></li>
<li><a href="/main/gov/library/">Library</a></li>
<li><a href="/main/gov/parksrecreation/">Parks and Recreation</a></li>
<li><a href="/main/gov/police">Police</a></li>
<li><a href="/main/gov/publicworks">Public Works</a></li>
</li>
<!-- / Government -->
</ul>
</div>
<!-- /Global Navigation -->
</body>
</html>
You should also note you have some invalid HTML in there. You can’t have <br> as the direct child of a <ul>. Just saying.
Yup, I intentionally put those breaks in so i can have some empty space on top of the menus, but I found the location to adjust the height in the superfish css and just have not removed those breaks yet. It will be removed when things are finalized
As for your suggestion, I had replaced the HTML you suggested and ran the example; however, now the superfish submenu itself is rotated too. Is there a way to keep the submenus from rotating? I only want the first <UL> level to rotate so it would fit the background image i will be using.
After your suggestion, I have tried to do it on my own – but it’s not coming out the way I’m expecting it to. With the main <LI> having the rotation, any subsequent <ul> and <li> would be rotated too. So what I did was created a span id call nav_neg_xxxxxxx and did the CSS rotation (only backwards) – It works on FF. Chrome it is not cooperating. I have yet to try IE (IE has a text rotation problem where the background would be black, i’d have to get other browsers working first before adding yet another class just for IE)
