SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css a:hover display block is supposed to pop up below navbar

    am trying to create a popup on mouseover on the nav bar items. Have tried the easy stuff recommended to me last week, but to no avail. I'm in over my head. please help.
    my html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Index</title>
    <link href="pmstyles.css" rel="stylesheet" type="text/css">
    <link href="pmstyles2.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="header"><p><img src="logo2b.jpg" width="610" height="49"></p>
    </div>
    <div id="nav">
    <ul>
    <li><a href="/" title="Home">HOME</a></li>
    <li> | <a href="businessplanning.htm" title="BUSINESS PLANNING">BUSINESS PLANNING<span>This paragraph is supposed to pop up below the nav bar. But the dang thing won't cooperate and I'm about ready to check into the hospital for mental collapse.</span></a></li>
    <li><a href="businessplanning.htm"> |</a> <a href="/design/" title="DESIGN SERVICES">DESIGN SERVICES</a></li>
    <li> | <a href="/negotiation/" title="NEGOTIATION SERVICES">NEGOTIATION SERVICES</a></li>
    <li> | <a href="/project/" title="PROJECT MANAGEMENT">PROJECT MANAGEMENT</a></li>
    <li> | <a href="/pos/" title="POS SYSTEMS">POS SYSTEMS</a></li>
    </ul>
    </div>
    <div id="content">
    <p>Blah, blah, blah. </p>
    <p></p></div>
    <p></p></div>
    </div>
    </body>
    </html>

    My css code:
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    }
    body {
    background-color: #003366;
    margin:0;
    padding:0;
    }
    div#nav {
    }
    div#nav ul {
    list-style-type: none;
    margin:0;
    padding:5;
    }
    div#nav ul li {
    display: inline;
    }
    nav ul li a {
    background-color: #CCFFFF;
    text-decoration: none;
    }
    a:link {
    color: #66FFFF;
    text-decoration: underline;
    }
    a:visited {
    text-decoration: underline;
    color: #FFCC66;
    }
    a:hover {
    text-decoration: none;
    color: #CCCCCC;
    }
    a:active {
    text-decoration: underline;
    }

    #header p {margin:0;padding:0;}
    div#content {
    width: 200px;
    color: #33FFFF;
    padding: 10;
    margin-top: 25px;
    margin-left: 5px;
    float: left;
    }
    div#nav ul li a span {
    display: none;
    }
    div#nav ul li a:hover span {
    display: block;
    margin: 1px;
    padding: 1px;
    position: absolute;
    left: 150px;
    top: 150px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to add one more line for ie otherwise it won't show.
    Code:
    div#nav ul li a:hover{border:none}
    div#nav ul li a:hover span {
    display: block;
    margin: 1px;
    padding: 1px;
    position: absolute;
    left: 150px;
    top: 150px;
    }
    IE needs something in the anchor on hover to be different from the original settings. Usually people change the background color or text color anyway and then it works without problem.

    Paul


Bookmarks

Posting Permissions

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