SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast cheater1's Avatar
    Join Date
    Oct 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help me make a subnavigation.

    Hello I'm trying to build a website and I'm using a template from template monster.

    My site is http://serverflare.com/home.html

    I'm trying to make a drop down navigation.

    I tried editing the code by putting this in

    .menu ul li ul {display: none;}
    .menu li:hover ul{ display:block; width:160px;font-size:.5em; background-color:#64715; position: absolute; left:50px; top:50px }
    I tried but every time I hover over it distorts the whole design.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Which menu items are means to have a dropdown? I don't see any sub ULs there.

  3. #3
    SitePoint Enthusiast cheater1's Avatar
    Join Date
    Oct 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry let me update it, I was actually editing my copy on my computer not the server =[ I really want the subnavi to be a vertical list. It keeps coming out to be a horizontal one.

    This is the code that I just added:

    home.html
    <div id="gameMenu">
    <ul>
    <li><a href="index-2.html">Mine Craft</a></li>
    <li><a href="index-3.html">Counter Strike 1.6</a></li>
    <li><a href="index-5.html">Counter Strike Source</a></li>
    </ul>
    </div>
    style.css
    .menu ul ul{display:none;}
    .menu ul ul{display:list-item; position: absolute; left: 0px; top: 100px; font-size: 0.5em;}

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Try adding this:

    .menu ul li { float:none;}

    That would make it go back to a "vertical" drop... style the rest to taste.

    Hope that helps.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheater1 View Post
    I'm trying to make a drop down navigation.
    Hi,
    To make a dropdown menu you will want to hide the sub list off screen with a large negative margin.
    Then you set that margin to zero on li:hover to reveal the sub list.

    Here are a couple of simple examples that show the basic concept, view the page source for the css and html.

    http://www.css-lab.com/demos/nav/easy-dropdown.html
    http://www.css-lab.com/demos/nav/easy-dropdown-2.html

  6. #6
    SitePoint Enthusiast cheater1's Avatar
    Join Date
    Oct 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys.

    I used the float:none method and it works great.


    Now I have another issue. When I hover over "VPS Server" menu it will pop open the subneavigation but it won't let me rollover to them. I think because the logo is blocking it. I've tried chaning the z-index but that didn't work. How can I fix this?

    Also how can I remove that double gray line under the navigation bar. Everytime I roller over a menu it gets distorted.

    Thank for the help in advance.

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

    You need to follow the examples that Ray gave otherwise this will never work properly. The submenus need to be position:absolute and you need this sort of code to make it work.

    HTML Code:
    .menu ul{overflow:visible;height:40px}
    .menu{position:relative;z-index:99}
    .menu ul li li {display:block;float:none;}
    .menu ul li{position:relative;}
    
    .menu ul ul {
    position:absolute;
    left:0;
    top:40px;
    margin-left:-999em;
    height:auto;
    }
    .menu li:hover ul{margin-left:0;}
    That code should follow your original and will start to get things back on track.

    Note that only positioned elements can have a z-index so adding z-index:3 to .menu will do nothing unlkess you also add position:relative.

  8. #8
    SitePoint Enthusiast cheater1's Avatar
    Join Date
    Oct 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You need to follow the examples that Ray gave otherwise this will never work properly. The submenus need to be position:absolute and you need this sort of code to make it work.

    HTML Code:
    .menu ul{overflow:visible;height:40px}
    .menu{position:relative;z-index:99}
    .menu ul li li {display:block;float:none;}
    .menu ul li{position:relative;}
    
    .menu ul ul {
    position:absolute;
    left:0;
    top:40px;
    margin-left:-999em;
    height:auto;
    }
    .menu li:hover ul{margin-left:0;}
    That code should follow your original and will start to get things back on track.

    Note that only positioned elements can have a z-index so adding z-index:3 to .menu will do nothing unlkess you also add position:relative.
    Thanks for the help. This worked perfectly.


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
  •