• 0

css rollover image menu


Question

hey everyone, i will be the first to admit im not very good at CSS, it has been about 1.5 years since i even touched the stuff last. so i did some searching around the net and came up with the following:

i have these images:

post-31002-1203433990.png THIS IS PHOTOS.PNG

post-31002-1203433913_thumb.png THIS IS MENU.PNG

there are more menu options than that. ok so i have this code:

in header.php:

<div id="topmenu" >
	<ul>
		<li id="main"><a href="/"><span><em>Main</em></span></a></li>
	</ul>
</div>

in CSS:

#topmenu { 
	height:23px; 
	background-image:url(images/menu/menu.png); 
	}

#topmenu ul { 
	list-style:none; 
	margin:0; 
	padding:0 10px;  
	}

#topmenu li { 
	float:left; 
	}

#topmenu li a span, #topmenu li a em { 
	display:none; 
	}

#topmenu li a { 
	display:block; 
	height:23px; 
	width:100px; 
	background-position:center top; 
	}

#topmenu li a:hover span { 
	display: block; 
	width:100px; 
	height:23px; 
	top:-23px; 
	background-position:center bottom; 
	}

#topmenu li#photos a, #topmenu li#photos a:hover span { 
	background-image:url(images/menu/photos.png); 
	}

and this is the problem i'm getting:

post-31002-1203434021.png

As you can see they are doubling up on top of each other. So my question is, how can i remove the normal state of the menu item. I don't want to use solid colour background for the menu items as i have made many picture/colour themes for this blog depending on events and seasons in Japan. I'm hoping this is really simple. I don't even know where to start to find an answer to this as i got this code from a how-to. sorry for trouble ><

Edited by fukachu
Link to comment
https://www.neowin.net/forum/topic/620791-css-rollover-image-menu/
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Your CSS seems to be, at the very least, partially incomplete because the last bit of code is missing the closing }, but I'm sure that you just didn't include it.

Which of the two images is main.png? I'm not seeing where the second image (main2.png?) is put in by the CSS either. Is this page accessible for us to see?

I like to refer people to this page for CSS rollovers (which can help you in two ways, with the rollover and with no preloading).

  • 0

thank you for your reply, sorry that i didn't give everything correcly. I have named the images above and i have fixed the code to reflect the images better at the last minute i changed the image from main to photos as that particular one showed the problem more clearly but if forgot to edit the code in this post.

you can view the site here\ it is very simple default wordpress layout with some graphical changes and the menu. obviously not complete but wanting to get this menu nailed before i move on.

as for the website you linked to. i tried using that sites information once before and i must have been doing something wrong. 1.5 years ago i had a hell of a time getting everything to look the same in the menu in firefox/safari/ie even though it is meant to be compatible. so i looked elsewhere this time. also with the example you show there, it might still have the original yellow image showing but simply being covered up by the brown and black image sections.

what i need is for the regular state image, the smaller version of photos, to disappear when in hover state so that it doesn't appear behind the larger, hover state image of photos.

the reason for this is the themes i will have as you can see below will be changed every few weeks to reflect what is going on in Japan: it makes my life easier if i can have the menu without putting the colour backgrounds in. then if i want to add new menu items down the track, which is more than likely, i can just make one image with the text rather than as many as 20 (when finished making all the themes)

post-31002-1203463705_thumb.jpg

Edited by fukachu
  • 0

Alrighty, I saw this at first and confirmed that it's the problem: you're setting the background for both the anchor and span. Remove all references to applying a background to the span, and remove span from #topmenu li a:hover span { }

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • TP-Link Tri-Band AXE5400 Wi-Fi 6E Gaming Router Archer GXE75 is just $135 by Sayan Sen If you’re juggling gaming consoles, 4K streams and a growing roster of smart devices, the TP-Link Archer GXE75 Tri-Band AXE5400 Wi-Fi 6E Gaming Router is a good option to look at right now, considering the device is currently on sale at just $135 (purchase link under the specs table below). The Archer GXE75 promises up to 5.4 Gbps of throughput across three bands: 574 Mbps on 2.4 GHz, 2402 Mbps on 5 GHz and 2402 Mbps on 6 GHz (HE160 channels enabled). A 2.5 Gbps WAN/LAN port pairs with three 1 Gbps LAN ports and a USB 3.0 port for fast file sharing or printer access (purchase link down below). The quad-core CPU and 512 MB of RAM should help to handle multiple streams without bogging down, while MU-MIMO, OFDMA and 1024-QAM improve efficiency when several devices connect simultaneously. The router’s built-in Game Accelerator engine is said to automatically prioritize gaming packets (both wired and wireless), and TP-Link’s GPN (Gamers Private Network) acceleration can reduce packet loss for supported titles. HomeShield security brings firewall protection, device quarantining and parental controls. The technical specifications of the router are given below: Specification Details Wireless Standards IEEE 802.11ax 6 GHz; IEEE 802.11ax/ac/n/a 5 GHz; IEEE 802.11ax/n/g/b 2.4 GHz Wi-Fi Speeds 6 GHz: 2402 Mbps (802.11ax); 5 GHz: 2402 Mbps (802.11ax); 2.4 GHz: 574 Mbps (802.11ax) Spatial Streams 6 streams (tri-band OFDMA/MU-MIMO) Processor 1.7 GHz 64-bit Quad-Core CPU Memory 512 MB high-speed RAM Ethernet Ports 1× 2.5 Gbps WAN/LAN; 1× 1 Gbps WAN/LAN; 3× 1 Gbps LAN USB 1× USB 3.0 SuperSpeed port (up to 10× faster than USB 2.0) Antennas 4× high-performance external antennas with Beamforming Buttons Power On/Off; Reset; WPS/Wi-Fi; LED On/Off Working Modes Router Mode; Access Point Mode Security WPA, WPA2, WPA3, WPA/WPA2-Enterprise; SPI firewall; Access Control; IP/MAC binding; Application-layer gateway; HomeShield security suite VPN OpenVPN, PPTP, L2TP (server & client); WireGuard (server & client) Software & Services IPv4/IPv6; TP-Link HomeShield; EasyMesh; Parental controls; QoS by device; WAN types (Dynamic IP, Static IP, PPPoE, PPTP, L2TP); DDNS (TP-Link, NO-IP, DynDNS); auto firmware updates Gaming Features Game QoS boost; gaming-port priority; Gamers Private Network acceleration; game-port forwarding; real-time game panel with stats & RGB control Operating Environment 0 °C – 40 °C; 10 %– 90 % non-condensing humidity Get the TP-Link Tri-Band AXE5400 Wi-Fi 6E Gaming Router Archer GXE75 at the link below: TP-Link Tri-Band AXE5400 Wi-Fi 6E Gaming Router Archer GXE75 | EasyMesh, HomeShield: $159.99 + $25 off with coupon => $134.99 (Sold and Shipped by Amazon US This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • Oh no... here we go again. Tha same sh*t that happaned to Mail & Calendar...
    • I too have worked with pro gear for decades and so I found the interface to be unintuitive from both the pro and casual side (a rare "accomplishment" by what are obviously otherwise skilled coders, hehe). I eventually got it to work, thanks for offering, but I found other compatibility issues with my own use case, so I just dropped it entirely. Right now, I just use an analog line out/line in approach which works as expected across all usage scenarios. With both machines on the same power block/outlet, I'm not getting any analog hum or hiss. My next step will be to try the updated Multiplicity 4 when a bug, addressing this very issue unfortunately, is resolved. Knowing Stardock, that could be tomorrow or five years from now, so I check back every few months to see it it's fixed and I want to upgrade. Again, thanks for offering to help.
    • We recognize that performance can use some improvements, and we continue to work on improving it. However, it's worth noting that massive performance improvements don't happen overnight, they take a lot of work and effort, and in most cases, the improvements are more noticeable when you compare across several updates. That said, Files is open-source and everyone is invited to help with these efforts 🙂
  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      Michael Scrip
      203
    3. 3
      ATLien_0
      197
    4. 4
      Xenon
      137
    5. 5
      +FloatingFatMan
      115
  • Tell a friend

    Love Neowin? Tell a friend!