www.webdeveloper.com
Results 1 to 3 of 3

Thread: css <ul> menu - want a mouseover image?

  1. #1
    Join Date
    Oct 2007
    Posts
    161

    css <ul> menu - want a mouseover image?

    I'm using a css <ul> menu but want to have an image appear in the left hand margin on mouseover (a small arrow or star etc)...

    Here's the CSS for the menu :

    Code:
    #vertmenu {
    width: 190px;
    padding: 0px;
    margin: 0px;
    }
    
    #vertmenu h1 {
    display: block;
    background-color:#FF9900;
    padding: 3px 0 5px 3px;
    border: 1px solid #000000;
    color: #009999;
    margin: 0px;
    width:190px;
    }
    
    #vertmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #vertmenu ul li {
    margin: 0px;
    padding: 0px;
    }
    #vertmenu ul li a {
    	display: block;
    	text-decoration: none;
    	color: #009999;
    	width:190px;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #CCCCCC;
    	border-top-width: 1px;
    	border-top-style: dashed;
    	border-top-color: #CCCCCC;
    	padding-top: 5px;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-left: 20px;
    }
    
    #vertmenu ul li a:hover, #vertmenu ul li a:focus {
    	color: #666666;
    	background-color: #FFFFFF;
    }
    and the page code

    Code:
    <div id="vertmenu">
    			<ul>
    				<li><a href="#" tabindex="1">item 1</a></li>
    				<li><a href="#" tabindex="2">item 2</a></li>
    				<li><a href="#" tabindex="3">item 3</a></li>
    			</ul>
    </div>
    Any ideas?

  2. #2
    Join Date
    Feb 2011
    Posts
    231
    Hy,
    Try add a background-image for li:hover
    #vertmenu ul li:hover { background-image: url('image.jpg'); }

  3. #3
    Join Date
    Oct 2007
    Posts
    161
    Perfect

    Thank you (I <3 this forum!!)

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