www.webdeveloper.com
Results 1 to 3 of 3

Thread: how to set background for a <li>

  1. #1
    Join Date
    Jul 2008
    Posts
    83

    how to set background for a <li>

    Hi guys, i'm trying to create a navigation bar for my new site which change the color status when its hovered, but the way i'm using it only changes the <a> background color, i'd like to change the whole background color for the whole <li> tag, which is a common effect nowadays......any advice?

    //code

    <html>
    <head>
    <script type="text/javascript">
    </script>

    <style type="text/css">
    body{background-color: #cccc77; margin: 0; padding: 0;}
    #container{border: 2px solid gold; width: 400px; height: 350px; margin: 20px auto;}
    #menu{height: 30px; width: 398px; border: 1px solid #6666cc; margin: 0px auto;}
    #menu ul{margin: 0; padding: 0;}
    #menu li{list-style-type: none; margin-left: 50px; display: inline;}
    #menu a{text-decoration: none; color: #5555cc; font-family: verdana;}
    #menu a:hover{text-decoration: none; background-color: red; color: yellow;}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="menu">
    <ul>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Viaggi</a></li>
    <li><a href="#">Destinations</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    </script>
    
    <style type="text/css">
    body{background-color: #cccc77; margin: 0; padding: 0;}
    #container{border: 2px solid gold; width: 399px; height: 350px; margin: 20px auto;}
    #menu{height: 30px; width: 396px; border: 1px solid #6666cc; margin: 0px;}
    #menu ul {margin: 0; padding: 0;}
    #menu li{list-style-type: none; float:left;}
    #menu a{display:block;width:132px;line-height:30px;text-align:center;text-decoration: none; color: #5555cc; font-family: verdana;}
    #menu a:hover{text-decoration: none; background-color: red; color: yellow;}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="menu">
    <ul>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Viaggi</a></li>
    <li><a href="#">Destinations</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Sep 2008
    Posts
    5
    li a:hover {
    background-color: red;
    }

    The above rule would only apply to links in lists.
    http://css.maxdesign.com.au/listamat...rizontal04.htm

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