Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Drop Down Wont show in CSS

    Doing this in chrome, it will not drop down. It hides, but
    PHP Code:
    nav ul li:hover ul 
    will not work in ie, firefox, or chrome, and nothing showing up wrong on firebug except that its hidden.
    I've also tried:
    PHP Code:
    nav ul li:hover ul
    nav ul li
    :hover ul
    nav li
    :hover ul
    nav li
    :hover ul
    nav ul li
    :hover ul li (with the original one
    and none have worked. I dont want to leave nav out obviously in case I actually use an unordered list somewhere else....trying to remember where all those are makes me forget and mess up dumb things.


    PHP Code:
    /* main nav decoration */
    nav {
        
    clearleft;
        
    floatleft;
        
    margin40px 30%;
        
    text-aligncenter;
        
    widthauto;
    }
    /* hide submenus */
    nav ul ul {
        
    displaynone;
    }
    /* show submenus */
    nav ul li:hover ul {
        
    displayblock;
    }
    /* main bar decoration */
    nav ul {
        
    displayinline-table;
        
    floatleft;
        list-
    stylenone;
        
    positionrelative;
    }
    nav ul:after {
        
    content"";
        
    clearboth;
        
    displayblock;
    }
    nav ul li {
        
    floatleft;
        
    margin1px;
    }
    nav ul li:hover {
        
    /* nothing needed so far */
    }
    nav ul li:hover a {
        
    colorgray;
        
    text-shadow4px 3px 4px #ffffff;
    }
    nav ul li a {
        
    displayblock;
        
    colorwhite;
        
    padding5px 10px;
        
    text-decorationnone;
        
    text-shadow4px 3px 4px #000000;
    }
    nav ul ul {
        
    padding0px;
        
    positionabsolute;
        
    top100%;
    }
    nav ul ul li {
        
    border-top1px solid #6b727c;
        
    border-bottom1px solid #575f6a;
        
    floatnone;
        
    positionrelative;
    }
    nav ul ul li a {
        
    colorwhite;
        
    padding15px 40px;
        
    text-decorationnone;
    }
    nav ul ul li a:hover {
        
    colorgray;
        
    text-shadow4px 3px 4px #ffffff;
    }
    nav ul ul ul {
        
    positionabsolute;
        
    left100%;
        
    top0px;

    Last edited by gkjr1; 05-18-2013 at 08:08 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    How should we know what’s wrong if you don’t show us your HTML? CSS alone isn’t doing anything.

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Forgot. Sorry...

    PHP Code:
             <nav>
                <
    ul>
                    <
    li><a href="index.php">Home</a>
                        <
    ul>
                            <
    li><a href="news.php">News</a></li>
                            <
    li><a href="blogs.php">Blogs</a></li>
                        </
    ul>
                    </
    li>
                    <
    li><a href="about.php">About</a>
                        <
    ul>
                            <
    li><a href="ranks.php">Ranks</a></li>
                        </
    ul>
                    </
    li>
                    <
    li><a href="events.php">Events</a></li>
                    <
    li><a href="members.php">Members</a></li>
                    <
    li><a href="gallery.php">Media</a>
                        <
    ul>
                            <
    li><a href="pics.php">Pics</a></li>
                            <
    li><a href="vids.php">Vids</a></li>
                        </
    ul>
                    </
    li>
                    <
    li><a href="forum.php">Forum</a></li>
                    <
    li><a href="chat.php">Chat</a></li>
                    <
    li><a href="joinus.php">Join Us</a></li>
                </
    ul>
            </
    nav
    Last edited by gkjr1; 05-18-2013 at 08:33 PM.

  • #4
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I know this will be a block of hell, but in the event it seems like something is stopping it, this is the entire CSS

    PHP Code:
    /* GLOBAL STYLES */
    headerfigureimgsectionformfooternavarticle{
        
    displayblock;
    }
    * {
        
    font-familyVerdanaGenevasans-serif;
        
    font-size100%;
        
    margin0px;
        
    padding1px;
    }
    html {
        
    backgroundurl(../images/phoenix_legion_wallpaper_main.bmpno-repeat center center fixed;
            -
    webkit-background-sizecover;
            -
    moz-background-sizecover;
            -
    o-background-sizecover;
            
    background-sizecover;
        
    filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='.images/phoenix_legion_wallpaper_main.bmp'sizingMethod='scale');
            -
    ms-filter"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/phoenix_legion_wallpaper_main.bmp', sizingMethod='scale')";
    }

    /* BACKGROUND IMAGE STUFF */
    img.bg {
      
    /* Set rules to fill background  */
      
    min-height100%;
      
    min-width1024px;
        
      
    /* Set up proportionate scaling  */
      
    width100%;
      
    heightauto;
        
      
    /* Set up positioning */
      
    positionfixed;
      
    top0;
      
    left0;
    }

    @
    media screen and (max-width1024px) { /* Specific to this particular image  */
      
    img.bg {
        
    left50%;
        
    margin-left: -512px;   /* 50%  */
      
    }
    }

    /* GLOBAL TEXT AND LINKS */
    {
        
    colorgray;
        
    font-size1em;
        
    font-weightnormal;
        
    text-decorationnone;
        
    }
    {
        
    colorwhite;
        
    font-size1em;
        
    font-weightnormal;
        
    text-decorationnone;
        
    }
    a:hover {
        
    colorgray;
        
    font-size1em;
        
    font-weightnormal;
        
    text-decorationnone;
    }

    /* BODY STYLES */
    /* set the default page element styles */
    body {
        
    colorblack;
        
    max-width1980px;
        
    min-width1000px;
        
    positionrelative;
        
    width99.5%;
    }

    /* BASE ELEMENT STYLES */
    /* set base element styles */
    header {
        
    colorblack;
        
    height25px;
        
    margin1px;
        
    positionfixed;
        
    top0px;
        
    width100%;
    }
    header article {
        
    clearnone;
        
    floatright;
        
    margin1px 95px 1px 1px;
        
    widthauto;
    }
    header article img {
        
    bordernone;
        
    clearnone;
        
    cursorpointer;
        
    floatright;
        
    margin1px;
        
    widthauto;
    }
    header article p {
        
    clearnone;
        
    cursorpointer;
        
    floatright;
        
    margin1px;
        
    widthauto;
    }
    header article a {
        
    clearnone;
        
    cursorpointer;
        
    floatright;
        
    margin1px;
        
    widthauto;
    }

    /* main nav decoration */
    nav {
        
    clearleft;
        
    floatleft;
        
    margin40px 30%;
        
    text-aligncenter;
        
    widthauto;
    }
    /* hide submenus */
    nav ul ul {
        
    displaynone;
    }
    /* show submenus */
    nav ul li:hover li {
        
    displayblock;
    }
    /* main bar decoration */
    nav ul {
        
    displayblock;
        
    floatleft;
        list-
    stylenone;
        
    positionrelative;
    }
    nav ul:after {
        
    content"";
        
    clearboth;
        
    displayblock;
    }
    nav ul li {
        
    floatleft;
    }
    nav ul li:hover a {
        
    colorgray;
        
    text-shadow4px 3px 4px #ffffff;
    }
    nav ul li a {
        
    displayblock;
        
    colorwhite;
        
    padding5px 10px;
        
    text-decorationnone;
        
    text-shadow4px 3px 4px #000000;
    }
    nav ul ul {
        
    padding0px;
        
    positionabsolute;
        
    top100%;
    }
    nav ul ul li {
        
    border-top1px solid #6b727c;
        
    border-bottom1px solid #575f6a;
        
    floatnone;
        
    positionrelative;
    }
    nav ul ul li a {
        
    colorwhite;
        
    padding15px 40px;
    }
    nav ul ul li a:hover {
        
    colorgray;
        
    text-shadow4px 3px 4px #ffffff;
    }
    nav ul ul ul {
        
    positionabsolute;
        
    left100%;
        
    top0px;
    }

    section {
        
    /* old stuff to remember 
        background-color: rgb(242,242,242);
        background-color: rgba(242,242,242,0.8);
        border: 1px solid rgb(227,177,14);
        border: 1px solid rgba(227,177,14,0.8);
        
        -o-border-radius: 5px 5px 5px 5px;
            -moz-border-radius:  5px 5px 5px 5px;
                -webkit-border-radius:  5px 5px 5px 5px;
                    border-radius: 5px 5px 5px 5px;
                    
        -o-box-shadow: 0 0 35px rgb(0,0,0);
            -moz-box-shadow: 0 0 35px rgb(0,0,0);
                -webkit-box-shadow: 0 0 35px rgb(0,0,0);
                    box-shadow: 0 0 35px rgb(0,0,0);
        */
        
    backgroundurl(../images/phoenix_website_middle_bar2.pngno-repeat top left;
            -
    webkit-background-sizecontain;
            -
    moz-background-sizecontain;
            -
    o-background-sizecontain;
            
    background-sizecontain;
        
    clearleft;
        
    floatleft;
        
    height775px;
        
    margin5px 5px 5px 55%;
        
    padding1px;
        
    width775px;
    }
    section p#pagename {
        
    colorwhite;
        
    cursorpointer;
        
    floatleft;
        
    padding0px 0px 0px 10px;
        
    font-weightbold;
        
    text-shadow4px 3px 4px #000000;
        
    widthauto;
    }
    section p#pagecontent{
        
    clearleft;
        
    floatleft;
        
    height690px;
        
    overflow-yscroll;
        
    padding1px 5px 1px 50px;
        
    text-decorationbold;
        
    width690px;
    }

    footer {
        
    backgroundurl(../images/phoenix_website_bottom_bar.pngno-repeat top left;
            -
    webkit-background-sizecover;
            -
    moz-background-sizecover;
            -
    o-background-sizecover;
            
    background-sizecover;
        
    bottom1px;
        
    colorwhite;
        
    margin1px;
        
    positionfixed;
        
    width100%;
    }
    footer article {
        
    clearnone;
        
    floatleft;
        
    margin1px;
        
    width100%;
    }
    footer article p:first-of-typefooter article p:nth-of-type(2) {
        
    clearnone;
        
    colorwhite;
        
    cursorpointer;
        
    floatleft;
        
    margin1px;
        
    width400px;
    }
    footer article p:nth-of-type(3) {
        
    clearnone;
        
    colorwhite;
        
    cursorpointer;
        
    floatleft;
        
    margin1px;
        
    width400px;
    }
    footer article p:nth-of-type(4), footer article p:last-of-type {
        
    clearnone;
        
    colorwhite;
        
    cursorpointer;
        
    floatright;
        
    margin1px;
        
    width250px;


  • #5
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I don't know what happened but it magically started working. It wasn't my cache either. Hmmmmmmmmmmmmmm.


    If anyone sees a problem let me know. I randomly changed a few things but eh whatever.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by gkjr1 View Post
    I randomly changed a few things but eh whatever.
    That's always the best method to solve problems...
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #7
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Lol, yeah.

    It was stuff I really figured would make no difference. Really I was just cleaning code around it so I don't know how it actually effected it, but apparently it did.

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    In case you want to get insight into how drop-downs are actually constructed, really want to master them, have a look here: How to Maken a Drop-down/Fly-out Menu with CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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