www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hover Menu Block

  1. #1
    Join Date
    Mar 2006
    Location
    London
    Posts
    155

    Hover Menu Block

    Hi, i am new to css and i need to make a menu that will go accross as well as down. I'm not sure how to do this. I've attached an image which is what i want to do with CSS. If anyone could give me some code that would be great.
    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Assuming the graphic you attached is full size (which I assume due to cursor size), then the following will work with the button graphic being a combined normal/rollover as per attached.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    }
    #nav {
    	display: block;
    	width: 510px;
    	height: 146px;
    	margin: 10px auto 0;
    }
    #nav li {
    	list-style: none;
    	float: left;
    }
    #nav a {
    	display: block;
    	width: 255px;
    	height: 73px;
    	text-align: center;
    	line-height: 73px;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 28px;
    	font-weight: bold;
    	color: #FFFFFF;
    	background-image: url(images/button.png);
    	background-position: left bottom;
    }
    #nav a:hover {
    	background-position: left top;
    }
    -->
    </style>
    </head>
    
    <body>
    <ul id="nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
    </body>
    </html>
    Cheers
    Graeme
    Attached Images Attached Images

  3. #3
    Join Date
    Mar 2006
    Location
    London
    Posts
    155

    Thanks

    Thanks that works perfectly

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Nice.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles