简体   繁体   中英

Horizontal nav with CSS rollover

The rollover's uses one image for the hover. It's cool, but I don't know how to get it to work in a horizontal menu. What do I do?

<head>
<style>
/*CSS HOVER WITH ONE IMAGE*/
#emailUs{display: block;width: 107px;height: 23px;background: url("slide.jpg") no-repeat 0 0;}
#emailUs:hover{background-position: 0 -23px;}
#emailUs span{position: absolute;top: -999em;}
</style>
</head>
<body>
<!--Trying to get three buttons to go across 'same button as example'-->
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>
</body>
</html>
</html>

CSS SPRITE
在此处输入图片说明

I believe you're looking for the css: "float:left;"

Once you set a link to "display:block;", it will automatically go to the next line after - so - making them float left will bring them back up into a horizontal line.

Also, you shouldn't have more than one element with the same id. Use class instead for anything you'll need on more than one element.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM