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.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Jan 2013
    Posts
    6
    Member #
    34975
    Hey guys so I made a normal menu with ul and li tags then for the last li I did a drop down.

    <div id="nav">
    <ul class="menu"><li class="first active"><a href="home.html" title="Home">home</a></li>
    <li><a href="video.html" title="Videospage">Videos</a></li>
    <li><a href="gallery.html" title="Welcome to our Gallery">Gallery</a></li>
    <li><a href="article.html" title="Welcome to the articles page">Articles</a></li>
    <li><a href="discussforums.html" title="Forums">Forums</a></li>
    <li class="last"><a href="extras/" title="Extras">extras</a><ul class="menu"><li class="first"><a href="audio.html" title="Audio">Audio</a></li>
    </ul></li>
    </ul>
    </div>
    okay and I coded the drop down css like so:

    #nav li ul li {

    background: none repeat scroll 0 0 #000000;
    display: block;
    height: 30px;
    left: 0;
    opacity: 0.3;
    top: 45px;
    }
    Ok and when I go to my page the drop down shows when I hover over the extras <li> but when I hover over the audio li the <li> goes hidden. Does anyone now what this is from.
    Ask for more info about my code if you need to.
    I really need this fixed ASAP.
    Thx guys

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I don't have enough of your CSS to really know for sure what's going on, but I suspect the items in the drop-down are extending past the bottom of the <ul>, so when you hover over the last item, you're no longer actually hovering over the <ul> any more.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Jan 2013
    Posts
    6
    Member #
    34975
    Thank you for responding so quickly.
    Here is my css for the whole nav div. (my whole menu)

    Code:
    /* Navigation */
    #nav {
    clear:both;
    margin: 0 auto;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    text-transform: uppercase;
    margin: 0; padding: 0;
    height: 56px;
    }
    #nav ul li {
    float: left;
    margin: 0; padding: 0;
    height: 40px;
    }
    #nav ul li a {
    height:50px;
    display: block;
    float: left;
    width: auto;
    margin: 0;
    padding: 0 20px;
    color: #a5a5a5;
    font: bold 16px/54px "Trebuchet MS", Helvetica, Arial, sans-serif;
    text-decoration: none;
    letter-spacing: 1px;
    }
    #nav li ul{
        display: none;
    
    }
    #nav li:hover ul {
        display: block;
        position: absolute;
    }
    #nav li ul li{
        background: none repeat scroll 0 0 #000000;
        display: block;
        height: 30px;
        left: 0;
        opacity: 0.3;
        top: 45px;
    }
     
    #nav ul li a:hover,
    #nav ul li a:active {
    color: #EE9900;
    }
    #nav ul li.active a {
    color: #FF8B04;
    }
    #nav{
    padding:0;
    margin:0;
    }
    #nav ul{
    padding:0;
    margin:0;
    }
    #nav li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    }
    
    #nav li a{
    width:100px;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    color: white;
    }
    #nav li a:hover{
    
    }
    #nav ul li:hover ul{
    visibility:visible;
    }
    #drop li:hover{
    background-color: #FFF;
    color: #CCF;
    }
    I have some extra code in here I believe but I am just trying to figure things out.
    Please tell me anything you can On what might be going wrong.

    Thanks

    Mooror

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    As I suspected, the li is too small, and when you hover over it, you're not hovering the parent li any more. Codepen to the rescue: http://codepen.io/ronaldroe/pen/CdiED
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Jan 2013
    Posts
    6
    Member #
    34975
    thank you for your help ..
    I tried this out on my website but there must be something prohibiting this from working because the results where the same.

    Here is my web page.
    http://www.onewaymedia.ca/

    Please do not give out any Information about this site as I do not want many people visiting while it is not finished. Thank you.

    Use Firebug it is amazing!!

  7. #6
    Junior Member
    Join Date
    Jan 2013
    Posts
    6
    Member #
    34975
    Also It is not a finished site so any help on what is or might be the problem would be very helpful indeed.

    Thanks

    Mooror

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I have no issues in FF and Chrome. The site is completely disjointed in IE9 tho.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Junior Member
    Join Date
    Jan 2013
    Posts
    6
    Member #
    34975
    Yes thanks for looking at that. I fixed the issue I was having it was an issue with the z-index. My mune originally was put in behind some of my other header elements. But we got it cleared up. But thank you for telling me about the EI problem I saw it and did some changes. Thank you for the big help sir.


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 10:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com