Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › CSS Help for Menu Bar

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • December 16, 2008 at 5:37 am #23775
    milad
    Member

    Hi All

    I am looking for some help on my CSS horizontal menu. I am new to CSS and still learning. I would appriciate
    Any one could help me on the issue that I have.

    My menu bar has sub menus. On the hover my sub menu does not stay for a while. it is hard to locate the
    link(or sub menu) that I wanted to click on.

    Here is my code (Menu DIV )

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <style type="text/css">
    <!–
    body {
    background-color: #FFFFFF;
    background-image: url(images/Background.jpg);
    background-repeat: repeat;
    }
    –>
    </style></head>

    <body>
    <table width="950" border="0" align="center" cellpadding="4" cellspacing="0">
    <tr>
    <td width="952" valign="top" bgcolor="#FFFFFF"><table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="954" height="3" bgcolor="#000000"> </td>
    </tr>

    <tr>
    <td height="31" valign="top" bgcolor="#993300">

    <div class="bitebody"><img src="images/banners/tour.jpg" width="950" height="100" border="0" usemap="#Map" />
    <map name="Map" id="Map">
    <area shape="rect" coords="3,2,299,73" href="index.php" />
    <area shape="rect" coords="825,4,869,19" href="index.php" />
    <area shape="rect" coords="875,4,946,22" href="index.php?page=contactus" />
    </map>
    </div>

    <div id="nav">
    <ul class="select">
    <li><a href="#"><b>Accomodation</b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=hotels">1* Hotels </a></li>
    <li><a href="index.php?page=hotels">2* Hotels </a></li>
    <li><a href="index.php?page=hotels">3* Hotels </a></li>
    <li><a href="index.php?page=hotels">4* Hotels </a></li>
    <li><a href="index.php?page=hotels">5* Hotels </a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Attractions</b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=attractions">New York</a></li>
    <li><a href="index.php?page=attractions">London</a></li>
    <li><a href="index.php?page=attractions">Paris</a></li>
    <li><a href="index.php?page=attractions">Tokyo</a></li>
    <li><a href="index.php?page=attractions1">Dubai</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Entertainment</b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=nightclubs">Nightclubs </a></li>
    <li><a href="index.php?page=nightclubs">Cinemas</a></li>
    <li><a href="index.php?page=nightclubs">Music</a></li>
    <li><a href="index.php?page=nightclubs">Comedy</a></li>
    <li><a href="index.php?page=nightclubs">Carnivals</a></li>
    <li><a href="index.php?page=nightclubs">Party</a></li>
    <li><a href="#">Tickets </a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Going out </b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=nightlife">Nightlife</a></li>
    <li><a href="index.php?page=nightlife">Restaurants </a></li>
    <li><a href="index.php?page=nightlife">Pubs & Bars</a></li>
    <li><a href="index.php?page=nightlife">Parks</a></li>
    <li><a href="index.php?page=nightlife">Shopping</a></li>
    <li><a href="index.php?page=nightlife">Casinos</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Guide</b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=events"> Events </a></li>
    <li><a href="index.php?page=tourist_info">Tourist Info</a></li>
    <li><a href="index.php?page=events">Airports</a></li>
    <li><a href="index.php?page=_weather">Weather</a></li>
    <li><a href="index.php?page=boroughs">City Info</a></li>
    <li><a href="index.php?page=public_holidays">Public Holidays</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Travel</b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=Buses">Railways</a></li>
    <li><a href="index.php?page=Buses">Subway</a></li>
    <li><a href="index.php?page=Buses">Busses</a></li>
    <li><a href="index.php?page=Buses">Coach Services</a></li>
    <li><a href="index.php?page=Buses">Cabs and Taxi Services</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Sports</b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=when_to_visit_">Basket ball</a></li>
    <li><a href="index.php?page=_immigration">Base ball</a></li>
    <li><a href="index.php?page=visit_visa">Athlatics</a></li>
    <li><a href="index.php?page=student_visa">Football</a></li>
    <li><a href="index.php?page=work_visa">Soccer</a></li>
    <li><a href="index.php?page=join_family">Other</a></li>
    <li><a href="index.php?page=transit_visa">Other</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>

    <ul class="select">
    <li><a href="#"><b>Visiting New York </b>
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul class="sub">
    <li><a href="index.php?page=when_to">When to Visit</a></li>
    <li><a href="index.php?page=immigration">Immigration</a></li>
    <li><a href="index.php?page=visit_visa">Visit Visa</a></li>
    <li><a href="index.php?page=student_visa">Student Visas</a></li>
    <li><a href="index.php?page=work_visa">Work Visa</a></li>
    <li><a href="index.php?page=join_family">Join Family</a></li>
    <li><a href="index.php?page=transit_visa">Transit</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul> </td>
    </tr>
    </div>

    Here is my CSS

    /* CSS Document */
    body {
    background-color: #660000;
    padding-top: 0px;
    margin-top: 1px;
    }
    .BlueNav1 {
    font-family: "Trebuchet MS";
    font-size: 12px;
    font-weight: bold;
    background-color: #000099;
    border: 1px dotted #999999;
    }
    .bluetext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    color: #0000CC;
    text-decoration: none;
    }
    .redtext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    color: #993300;
    text-decoration: none;
    }

    .blackheading {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    font-weight: bold;
    }
    #Navigation {
    font-family: "Trebuchet MS";
    font-size: 12px;
    background-color: #CCCCCC;
    }
    #login {
    font-family: "Trebuchet MS";
    background-color: #0099CC;
    font-size: 12px;
    color: #FFFFFF;
    }
    #login #login #form4 .blackheading {
    background-color: #000099;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    }
    #loginbuton {
    font-family: "Trebuchet MS";
    color: #FFFFFF;
    background-color: #003399;
    }
    .logopic {
    font-family: "Trebuchet MS";
    background-color: #999999;
    float: left;
    }
    .style12 {color: #FFFFFF}
    .style13 {color: #FF0000}

    .style14 {font-size: 10px}.Date {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    }
    .SmallWhiteText {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    }
    .SmallWhiteHeading {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    left: 4px;
    }

    .SearchTextBox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    padding: 3px;
    }
    .SearchButton {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #000000;
    padding: 4px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    #nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;

    }
    /* the styling */
    #nav {/*float:left; — Has IE problem */ width:950px; height:31px; background:#993300; position:relative;}

    #nav .select, #nav .current {
    margin:0px;
    padding:0px;
    list-style:none;
    display:block;
    }

    #nav li {display:inline; margin:0px; padding:0px;height:auto;}

    #nav .select a,
    #nav .current a {
    display:block;
    height:31px;
    float:left;
    text-decoration:none;
    font-size:12px;
    white-space:nowrap;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
    line-height: 28px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    * html #nav .select a, * html #nav .current a {width:1px;}

    #nav .select a b,
    #nav .current a b {
    height:31px;
    display:block;
    color:#ffffff;
    background-color: #993300;
    padding-right: 5px;
    padding-left:5px;

    }

    #nav .select a:hover,
    #nav .select li:hover a {background-position:0 -75px; border-color:#046; cursor:pointer;}

    #nav .select a:hover b,
    #nav .select li:hover a b {
    background-position:100% -75px;
    border-color:#046;
    color:#FFFFFF;
    background-color: #15479C;
    }

    #nav .sub {display:none;}

    /* for IE5.5 and IE6 only */
    #nav table {
    position:absolute;
    border-collapse:collapse;
    left:0;
    top:0;

    }

    #nav .current a {background-position:0 -75px; border-color:#046;}
    #nav .current a b {background-position:100% -75px; color:#ff6;}

    #nav .sub li a:hover,
    #nav .select a:hover .sub li a:hover,
    #nav .select li:hover .sub li a:hover {
    color:#fff;
    text-decoration:underline;
    }

    #nav .sub_active .current_sub a,
    #nav .sub_active a:hover {color:#ff6; text-decoration:underline;}

    #nav .select li a:hover .sub,
    #nav .select li:hover .sub {
    display:block;
    position:absolute;
    width:945px;
    top:21px;
    left:0;
    background:#15479C;
    z-index:100;
    font-size:11px;
    margin-top: 10px !important;
    height: 25px;
    padding-top: 5px;
    padding-left: 5px;

    }

    #nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
    #nav .sub_active {
    display:block;
    position:absolute;
    width:950px;
    top:21px;
    left:0;
    background:#005984;
    margin-top:1px;
    padding:0;
    z-index:10;
    color:#000;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: #fff;

    }
    * html #nav .sub_active, * html #nav .select a:hover .sub {
    z-index:-1;
    margin-top:1px;
    margin-top:1px;
    }

    #nav .sub_active a {
    height:25px;
    float:left;
    text-decoration:none;
    line-height:24px;
    white-space:nowrap;
    font-weight:normal;

    }
    #nav .sub_active a,
    #nav .select a:hover .sub li a,
    #nav .select li:hover .sub li a {
    font-size:12px;
    width:auto;
    white-space:nowrap;
    font-weight:normal;
    color:#fff;
    height:25px;
    line-height:24px;
    padding-right: 15px;
    padding-left: 15px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #000066;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    .FooterText {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #cccccc;
    }

    For example I want to amek my menu like . I want to make this stay for a while till i locate the sub menu
    Please help. much appriciated

    Thanks in advance

    http://www.forbes.com/
    http://www.visitlondon.com

    Milad

  • Author
    Posts
Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.