Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 21
  1. #1
    Junior Member DragonflyHeather's Avatar
    Join Date
    Jun 2011
    Location
    California
    Posts
    8
    Member #
    28082
    Hello everyone. I'm seeking advice on how to do a custom navigational drop down menu in CSS that is compatible in all browsers. I managed to get the code to work in I.E. but in Firefox, chrome and safari it's not working instead it's listing everything in the first button. Any help is greatly appreciated.

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Quote Originally Posted by DragonflyHeather, post: 208052
    Hello everyone. I'm seeking advice on how to do a custom navigational drop down menu in CSS that is compatible in all browsers. I managed to get the code to work in I.E. but in Firefox, chrome and safari it's not working instead it's listing everything in the first button. Any help is greatly appreciated.
    We'll need to see it
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Junior Member DragonflyHeather's Avatar
    Join Date
    Jun 2011
    Location
    California
    Posts
    8
    Member #
    28082
    Quote Originally Posted by George Dolidze, post: 208053
    We'll need to see it
    oops. I forgot to add it. here is my whole code please tell me where I am going wrong.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Little Knit Shoppe</title>
    <meta name="description" content="Knits">
    <meta name="keywords" content="longies, shorties, wool, soakers, dyed yarn, ">
    <link rel= "shortcut icon" href="">
    <!-- Intro text begins -->
    <style type="text/css">
    <!--
    body {
    background-image: url(http://i458.photobucket.com/albums/q...0Shoppe/BG.jpg);
    background-repeat: repeat;
    background-attachment:fixed;
    margin-bottom: 25px;
    font-family:'Trebuchet MS', 'Tahoma', Arial, Verdana, Sans-serif;
    font-size: 10px;
    color: #000000;
    }
    td {
    font-family:'Trebuchet MS', 'Tahoma', Arial, Verdana, Sans-serif;
    font-size: 10px;
    color: #000000;
    }

    a:link {
    color: #000000;
    text-decoration: none;
    border-style: none;
    }
    a:visited {
    text-decoration: none;
    color: #000000;
    border-style: none;
    }
    a:hover {
    text-decoration: none;
    color: #000000;
    border-style: none;
    }
    #topnav a:link {
    color: #000000;
    }
    #topnav a:visited {
    color: #000000;
    }
    #topnav a:hover {
    color: #000000;
    }
    #sidenav a:link {
    color: #000000;
    }
    #sidenav a:visited {
    color: #000000;
    }
    #sidenav a:hover {
    color: #000000;
    }
    }
    .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
    .menu ul{
    background:transparent;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
    float: left;
    padding:25px;
    }
    .menu li a{
    background:transparent url bottom right no-repeat;
    color:transparent;
    display:block;
    font-weight:strong;
    line-height:25px;
    margin:0px;
    padding:0px 10px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a{
    background: transparent url("images/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    }
    .menu li ul{
    background:#ff4981;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:150px;
    z-index:150;
    /*top:1em;
    /*left:0;*/
    }
    .menu li:hover ul{
    display:block;

    }
    .menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:150px;
    }
    .menu li:hover li a{
    background:none;

    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:transparent url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#000000;
    text-decoration:none;
    }
    .menu p{
    clear: left;
    }
    .navhc a{
    color:#000000;
    }
    .navhc a:hover{
    color:#000000;
    }
    .menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
    }
    .menu li:hover li a{
    background:none;

    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:transparent url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:transparent;
    text-decoration:none;
    }
    .menu p{
    clear:left;
    }
    </style>
    .style2 {color: #000000; }
    .style3 {color: #FFFFFF}
    -->
    </style></head>
    <body>
    <div align="center">
    <table width="1022" cellpadding="0" cellspacing="0">
    <tr>
    <td> <td> <div style="text-align:center; width:1022px; margin-left:auto; margin-right:auto;">
    <img id="Image-Maps_2201105200120079" src="http://i458.photobucket.com/albums/q.../WIP/HeadA.png" usemap="#Image-Maps_2201105200120079" border="0" width="1022" height="489" alt="" />
    <map id="_Image-Maps_2201105200120079" name="Image-Maps_2201105200120079">
    <area shape="rect" coords="58,40,93,73" href="http://www.facebook.com/home.php#!/p...71590756230223" alt="" title="" />
    <area shape="rect" coords="62,312,960,469" href="http://www.hyenacart.com/littleknitshoppe" alt="" title="" />
    </map>
    </div>
    <tr><td align="center" colspan="2" style="background-color:#ffffff" ><div class="menu">
    <ul>
    <li><a href="http://hyenacart.com/littleknitshoppe"><img src="http://i458.photobucket.com/albums/q...hop1-1.gif"</a>
    <ul>
    <li><a href="http://hyenacart.com/littleknitshopp...ategory=1">All Items</a></li>
    <li><a href="http://hyenacart.com/littleknitshopp...egory=2">Items by Elysia</a></li>
    <li><a href="http://hyenacart.com/littleknitshopp...egory=3">Items by Julia</a></li>
    <li><a href="http://hyenacart.com/littleknitshopp...egory=4">Items By Marilyn</a></li>
    <li><a href="http://hyenacart.com/littleknitshopp...egory=5">Items by Pam</a></li>
    </li>
    <li><a href="http://hyenacart.com/info_page.php?i...vid=4193"><img src="http://i458.photobucket.com/albums/q.../policies1.gif" border="0"></a></li>
    <li><a href="http://hyenacart.com/info_page.php?i...vid=4193"><img src="http://i458.photobucket.com/albums/q...WIP/About1.jpg" border="0"></a></li>
    <li><a href="http://hyenacart.com/info_page.php?i...vid=4193"><img src="http://i458.photobucket.com/albums/q...IP/Info1-1.gif" border="0"></a></li>
    <ul>
    <li><a href="http://hyenacart.com/littleknitshoppe"><img src="http://i458.photobucket.com/albums/q...eries1.gif"</a>
    <ul>
    <li><a href="http://www.flickr.com/photos/bugnbear/
    ">Elysia's Gallery</a></li>
    <li><a href="http://www.flickr.com/photos/shyviolet/
    ">Julia's Gallery</a></li>
    <li><a href="http://www.flickr.com/photos/marilyn...7626670279270/
    ">Marilyn's Gallery</a></li>
    <li><a href="http://www.flickr.com/photos/bluesaddle/sets/">Pam's Gallery</a></li>
    </li>
    <li><a href="mailto:littleknitshoppe@gmail.com"><img src="http://i458.photobucket.com/albums/q...P/Contact1.gif" border="0"></a></li>
    </ul>
    </div></td>
    </tr></table><table width="1022" cellpadding="0" cellspacing="0" align="center" background="http://i458.photobucket.com/albums/q...IP/MiddleA.png">
    <tr><td id="topnav">
    <style>
    }
    .addToCartButton {
    font-family: 'Trebuchet MS', 'Tahoma', Arial, Verdana, Sans-serif;
    font-size: 12px;
    color:#000000;
    font-weight:bold;
    border: 3px solid #527579;
    background-color:#ffffff;
    }
    .minicart {
    font-family:'Trebuchet MS', 'Tahoma', Arial, Verdana, Sans-serif;
    font-size: 12px;
    color:#000000;
    font-weight:bold;
    border: 3px solid #abd373;
    background-color:#ffffff;
    border-collapse: collapse;
    }
    .storeTable{
    table-align:middle;
    background-color: transparent;
    border: 0px solid #000000;
    border-collapse: collapse;
    width: 70%;
    font-family:'Trebuchet MS', 'Tahoma', Arial, Verdana, Sans-serif;
    color: #000000;
    width: 70%;
    }
    .storeTableHead{
    background: #abd373;
    border: 2px solid #000000;
    border-collapse: collapse;
    width: 70%;
    font-family: 'Trebuchet MS', 'Tahoma', Arial, Verdana, Sans-serif;
    font-size: 12px;
    }
    .storeTableCell_td {
    border: 1px solid #000000;
    border-collapse: collapse;
    }
    .storeTableCell_td img
    {
    width: 185px;
    max-height: 250px;
    }
    .storeTableHead_td {
    border: 1px solid #000000;
    border-collapse: collapse;
    }
    table.main { border: 1px solid #000000;
    border-collapse: collapse;
    }
    table.main { border: 1px solid #000000;
    border-collapse: collapse;
    }
    </style>
    <!-- Intro text ends -->

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Do you have it online? Easier to trouble shoot for us.

  6. #5
    Junior Member DragonflyHeather's Avatar
    Join Date
    Jun 2011
    Location
    California
    Posts
    8
    Member #
    28082

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The problem is that your other menu items are children of the first one.
    DragonflyHeather likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    And further inspecting the code, there's a </li> where I believe you intended to have a </ul>


    EDIT: Actually, it looks like you did that a few times throughout the menu code
    DragonflyHeather likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Junior Member DragonflyHeather's Avatar
    Join Date
    Jun 2011
    Location
    California
    Posts
    8
    Member #
    28082
    How do I "unchild" them. I tried that once and it didn't work. Any suggestions on what I need to do.

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Fix what I wrote here, and then see if it's still broke.
    DragonflyHeather likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Junior Member DragonflyHeather's Avatar
    Join Date
    Jun 2011
    Location
    California
    Posts
    8
    Member #
    28082
    Thank you Ronald. Let me go in there and see what it does.


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com