Gå til innhold

CSS Horisontal Meny, hjelp til IE ++

Parallax312

Anbefalte innlegg

Parallax312

Parallax312

Skrevet
Skrevet

Hei,

 

Har lekt meg litt med en CSS horisontal meny, som fungerer bra, bortsett fra et par ting. Den fungerer fint i Opera/Firefox, men altså ikke i IE7 (ingen drop-down), kanskje ikke så overraskende. Trenger egentlig kun å få den til å fungere i IE7, ikke tidligere versjoner. Prøver også å få lagt til et blått tomt felt til høyre for den siste menyen, som strekker seg ut skjermen om man kjører høyere oppløsning enn skjermen for å unngå hvitt felt, hvis dere skjønner.

 

Håper noen kan hjelpe ;)

 

Her er koden:

 

<style type="text/css">

#header { margin: 0px; padding: 0px; height: 25px; z-index: 50; background-color: #ffffff; font-size: 11px; font-weight: bold; }
#header li { width: 105px; height: 22px; position: absolute; display: block; z-index: 50; list-style: none; text-align: center; }

#header a { width: 105px; height: 22px; display: block; z-index: 50; color: #FFFFFF; text-decoration: none; font-weight: bold; }

#headerNav1 { left: 0px; background-color: #0056a1; }
#headerNav2 { left: 105px; background-color: #0056A1; }
#headerNav3 { left: 210px; background-color: #0056A1; }
#headerNav4 { left: 315px; background-color: #0056A1; }
#headerNav5 { left: 420px; background-color: #0056A1; }
#headerNav6 { left: 525px; background-color: #0056A1; }
#headerNav7 { left: 630px; background-color: #0056A1; }
#headerNav8 { left: 735px; background-color: #0056A1; }
#headerNav9 { left: 840px; background-color: #0056A1; }
#headerNav10 { left: 945px; background-color: #0056A1; }
#headerNav11 { left: 1050px; background-color: #0056A1; }

#headerNav1 a { }
#headerNav2 a { background-position: -105px 0; }
#headerNav3 a { background-position: -210px 0; }
#headerNav4 a { background-position: -315px 0; }
#headerNav5 a { background-position: -420px 0; }
#headerNav6 a { background-position: -525px 0;}
#headerNav7 a { background-position: -630px 0;}
#headerNav8 a { background-position: -735px 0;}
#headerNav9 a { background-position: -840px 0;}
#headerNav10 a { background-position: -945px 0;}
#headerNav11 a { background-position: -1050px 0;}

#headerNav1 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav2 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav3 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav4 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav5 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav6 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav7 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav8 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav9 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav10 a:hover { background-color: #99CCCC; color: #FFFFFF; }
#headerNav11 a:hover { background-color: #99CCCC; color: #FFFFFF; }

#header li ul { visibility: hidden; position: absolute; left: -1px; margin: 0 0 0 1px; padding: 2px; width: 150px; border-width: 0px 1px 4px 1px; border-style: solid; border-color: #526E8D; }
#header #headerNav1 ul { background-color: #E7EFFF; }
#header #headerNav2 ul { background-color: #E7EFFF; }
#header #headerNav3 ul { background-color: #E7EFFF; }
#header #headerNav4 ul { background-color: #E7EFFF; }
#header #headerNav5 ul { background-color: #E7EFFF; }
#header #headerNav6 ul { background-color: #E7EFFF; }
#header #headerNav7 ul { background-color: #E7EFFF; }
#header #headerNav8 ul { background-color: #E7EFFF; }
#header #headerNav9 ul { background-color: #E7EFFF; }
#header #headerNav10 ul { background-color: #E7EFFF; }
#header #headerNav11 ul { left: -52px; background-color: #E7EFFF; }
#header li ul li, #header li ul li a { width: auto; position: relative; z-index: 56; color: #000000; font-weight: bold; text-align: center; }
#header li ul li a { padding: 2px; }
#header li:hover>ul { visibility: visible; }
</style>
<div>

 <ul id="header" style="margin-top: 2px;">
   <li id="headerNav1">
     <a href="">Configuration</a>
     <ul>
  	<li><a href="/admin/configuration.php?gID=1">My Store</a></li>
       <li><a href="/admin/configuration.php?gID=2">Minimum Values</a></li>
	<li><a href="/admin/configuration.php?gID=3">Maximum Values</a></li>
	<li><a href="/admin/configuration.php?gID=4">Images</a></li>
	<li><a href="/admin/configuration.php?gID=5">Customer Details</a></li>
	<li><a href="/admin/configuration.php?gID=7">Shipping/Packaging</a></li>
	<li><a href="/admin/configuration.php?gID=8">Product Listing</a></li>
	<li><a href="/admin/configuration.php?gID=9">Stock</a></li>
	<li><a href="/admin/configuration.php?gID=10">Logging</a></li>
	<li><a href="/admin/configuration.php?gID=11">Cache</a></li>
	<li><a href="/admin/configuration.php?gID=12">E-Mail Options</a></li>
	<li><a href="/admin/configuration.php?gID=13">Download</a></li>
	<li><a href="/admin/configuration.php?gID=14">GZip Compression</a></li>
	<li><a href="/admin/configuration.php?gID=15">Sessions</a></li>
	<li><a href="/admin/configuration.php?gID=16">Family Products</a></li>
	<li><a href="/admin/configuration.php?gID=900">Affiliate Program</a></li>
	<li><a href="/admin/configuration.php?gID=62">Feed Settings</a></li>
	<li><a href="/admin/configuration.php?gID=39">Featured</a></li>
	<li><a href="/admin/configuration.php?gID=904">Dynamic MoPics</a></li>
     </ul>
   </li>
   <li id="headerNav2">
     <a href="">Catalog</a>
     <ul>

       <li><a href="/admin/categories.php">Categories/Products</a></li>
	<li><a href="/admin/categories_ina.php">Inactive Products</a></li>
	<li><a href="/admin/quick_stockupdate.php">Quick-Stock-Updater</a></li>
	<li><a href="/admin/easypopulate.php">Easy Populate</a></li>
	<li><a href="/admin/featured.php">Featured Products</a></li>
	<li><a href="/admin/coupons.php">Discount Coupons</a></li>
	<li><a href="/admin/stockviewer.php">Stock Viewer</a></li>
	<li><a href="/admin/products_expected.php">Products Expected</a></li>
     </ul>
   </li>
   <li id="headerNav3">
     <a href="#">Families</a>

     <ul>
       <li><a href="/admin/view_families.php">View Families</a></li>
	<li><a href="/admin/modify_families.php?f_Id=1">Manage Families</a></li>
	<li><a href="/admin/select_family_display.php">Select Display</a></li>
	<li><a href="/admin/assign_families.php">Assign Families</a></li>
     </ul>
   </li>
   <li id="headerNav4">
     <a href="#">Modules</a>

     <ul>
       <li><a href="/admin/modules.php?set=payment">Payment</a></li>
       <li><a href="/admin/modules.php?set=giftwrap">Giftwrap</a></li>
	<li><a href="/admin/modules.php?set=shipping">Shipping</a></li>
	<li><a href="/admin/modules.php?set=ordertotal">Order Total</a></li>
     </ul>
   </li>
   <li id="headerNav5">
     <a href="#">Cust./Orders</a>

  <ul>
    <li><a href="/admin/customers.php">Customers</a></li>
       <li><a href="/admin/held_orders.php">Held Orders</a></li>
	<li><a href="/admin/orders_check.php">OrderCheck</a></li>
	<li><a href="/admin/orders.php">Orders</a></li>
     </ul>
   </li>
   <li id="headerNav6">
     <a href="#">Locations/Taxes</a>
     <ul>
       <li><a href="/admin/countries.php">Countries</a></li>
       <li><a href="/admin/zones.php">Zones</a></li>
     </ul>
   </li>
   <li id="headerNav7">
     <a href="#">Localization</a>
     <ul>
       <li><a href="/admin/currencies.php">Currencies</a></li>
       <li><a href="/admin/languages.php">Languages</a></li>
	<li><a href="/admin/orders_status.php">Order Status</a></li>
     </ul>
 <li id="headerNav8">
     <a href="#">Reports</a>
     <ul>
       <li><a href="/admin/stats_products_viewed.php">Products Viewed</a></li>
       <li><a href="/admin/stats_products_purchased.php">Products Purchased</a></li>
	<li><a href="/admin/customers_order_total.php">Customers Totals</a></li>
	<li><a href="/admin/stats_discount_coupons.php">Discount Coupons</a></li>
	<li><a href="/admin/stats_products_per_month.php">Purchased Per Month</a></li>
     </ul>
   </li>
   <li id="headerNav9">
     <a href="#">Affiliates</a>
     <ul>
       <li><a href="/admin/affiliate_summary.php">Summary</a></li>
       <li><a href="/admin/affiliate_affiliates.php">Affiliates</a></li>
	<li><a href="/admin/affiliate_payments.php">Payments</a></li>
	<li><a href="/admin/affiliate_sales.php">Sales</a></li>
	<li><a href="/admin/affiliate_clicks.php">Clicks</a></li>
       <li><a href="/admin/affiliate_banners.php">Banners</a></li>
	<li><a href="/admin/affiliate_news.php">Affiliate News</a></li>
	<li><a href="/admin/affiliate_newsletters.php">Affiliate Newsletter</a></li>
	<li><a href="/admin/affiliate_contact.php">Contact</a></li>
     </ul>
   </li>
   <li id="headerNav10">
     <a href="#">Tools</a>
     <ul>
       <li><a href="/admin/backup.php">Database Backup</a></li>
       <li><a href="/admin/banner_manager.php">Banner Manager</a></li>
	<li><a href="/admin/cache.php">Cache Control</a></li>
	<li><a href="/admin/define_language.php">Define Languages</a></li>
	<li><a href="/admin/upload_images.php">Upload Images</a></li>
	<li><a href="/admin/file_manager.php">File Manager</a></li>
       <li><a href="/admin/mail.php">Send Email(s)</a></li>
	<li><a href="/admin/server_info.php">Server Info</a></li>
	<li><a href="/admin/whos_online.php">Who's Online</a></li>
     </ul>
   </li>
   <li id="headerNav11">
     <a href="#">Information</a>
     <ul>
       <li><a href="/admin/frontpage_message.php">Frontpage Message</a></li>
       <li><a href="/admin/aboutus.php">About Us</a></li>
	<li><a href="/admin/faq.php">FAQ</a></li>
	<li><a href="/admin/storepolicy.php">Store Policy</a></li>
	<li><a href="/admin/privacy.php">Privacy Policy</a></li>
	<li><a href="/admin/conditions.php">Conditions of Use</a></li>
	<li><a href="/admin/discounts.php">Discount Info</a></li>
     </ul>
   </li>
 </ul>
</div>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...