SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Menu HELP!!!!

    http://tpahpdspreview.blogspot.com/

    I found a drop down menu html code that I liked and personalized it to my liking in the html editor.

    I seem to have switched a few things when I was trying to get the sub menus to appear in front of the blog posts and sidebar.

    Anyway. I really really need help in fixing it!

    1. When you hover over any of the menu items, the "Contact Us" link moves down below and I would like to it stay in place at the end of the menu.

    2. For the sub-menus, I want to fix the sub menu links to stretch out all the way and not be under one another (such as "fab not drab fridays") and I would like to be able to also make the purple border of the sub menus smaller so they aren't taking up so much space.

    I posted the link above so you could take a look at the site and get a better understanding of what I'm trying to explain.

    Here also is the html code that I'm using for the entire drop down menu, in case that helps!

    HTML Code:
    <style>
    #nav {
        margin: 230;
        padding: 7px 8px 0;
        background: #white url(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 -110px;
        line-height: 100%;
        border-radius: 2em;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        width: 100%
    }
    
    #nav li {
        margin: 0 5px;
        padding: 0 0 8px;
        float: left;
        position: relative;
        list-style: none;
        font-family: news gothic std;
    }
    
    
    /* main level link */
    #nav a {
        font-weight: normal;
        color: #00d6f6;
        text-decoration: none;
        display: block;
        padding: 10px 70px;
        margin: 0;
        -webkit-border-radius: 1.6em;
        -moz-border-radius: 1.6em;
        text-shadow: 0 1px 1px rgba(0,0,0, .3);
    }
    
    #nav a:hover {
        background: #white;
        color: #98015d;
    }
    
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
        background: white #98015durl(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 -40px;
        color: #white;
        border-top: solid 1px #white;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
        box-shadow:  0 1px 1px rgba(0,0,0, .2);
        text-shadow: 0 1px 0 rgba(255,255,255, 1);
    }
    
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
        background: 98015d;
        border: none;
        color: #98015d;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    
    #nav ul a:hover {
        background: #ff6c00 url(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 -100px !important;
        color: #98015d !important;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        text-shadow: 0 1px 1px rgba(0,0,0, .1);
    }
    
    /* dropdown */
    #nav li:hover > ul {
        display: block;
    }
    
    /* level 2 list */
    #nav ul {
        display: none;
        margin: 0;
        padding: 10;
        width: 260px;
        position: static;
        top: 250px;
        left: 200;
        background: #white url(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 0;
        border: solid 1px #98015d;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
        box-shadow: 0 1px 3px rgba(0,0,0, .3);
    }
    
    #nav ul li {
        float: none;
        margin: 0;
        padding: 10;
    }
    
    #nav ul a {
        font-weight: normal;
        text-shadow: 0 1px 0 #fff;
    }
    
    /* level 3+ list */
    #nav ul ul {
        left: 250px;
        top: -90px;
    }
    
    /* rounded corners of first and last link */
    #nav ul li:first-child > a {
        -webkit-border-top-left-radius: 9px;
        -moz-border-radius-topleft: 9px;
        -webkit-border-top-right-radius: 9px;
        -moz-border-radius-topright: 9px;
    }
    
    #nav ul li:last-child > a {
        -webkit-border-bottom-left-radius: 9px;
        -moz-border-radius-bottomleft: 9px;
        -webkit-border-bottom-right-radius: 9px;
        -moz-border-radius-bottomright: 9px;
    }
    
    /* clearfix */
    #nav:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    
    #nav {
        display: inline-block;
    }
    
    html[xmlns] #nav {
        display: block;
    }
    
    * html #nav {
        height: 1%;
    }
    </style>
    <ul id="nav">
      <li>
                <a href="http://www.blissful55.com/">Home</a>
            </li>
            <li>
                <a href="#">About Us</a>
                <ul>
                    <li>
                        <a href="#">Our Sisterly Story</a>
                    </li>
                    <li>
                        <a href="#">Meet Jen</a>
                   </li>
                    <li>
                        <a href="#">Meet Laryssa</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Projects</a>
                <ul>
                    <li>
                        <a href="#">Feeling Crafty</a>
                    </li>
                    <li>
                        <a href="#">Trash to Treasure</a>
                    </li>
                    <li>
                        <a href="#">Budget Friendly DIY</a>
                   </li>
                    <li>
                        <a href="#">Recipes</a>
                   </li>
                    <li>
                        <a href="#">Home Decor</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Weekly Happenings</a>
            <ul>
            <li>
                <a href="#">Fab Not Drab Fridays</a>
                   </li>
                    <li>
                        <a href="#">Work On You Wednesdays</a>
                   </li>
                    <li>
                        <a href="#">Where We Party</a>
             </li>
                </ul>
            </li>
            <li>
                <a href="#">Contact Us</a>
                <ul>
                    <li>
                        <a href="#">Advertising/Blog Swaps</a>
           </li>
            <li>
                <a href="#">Get Featured!</a>
           </li>
            <li>
                <a href="#">Want to Guest Post?</a>
                    </li>
                </ul>
            </li>
            <li>
            </li>
        </ul>
    Thanks so much to anyone that can help!!!
    Last edited by Mittineague; Sep 25, 2012 at 17:00. Reason: reformatting bbcode tags

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Hi Pep+Pup! Welcome to sitepoint. I am on my way home so I am sorry to only partially answer your question
    Code:
    #nav {
    			/*margin: 230px;*/
    padding: 7px 8px 0;
    background: #white url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    width: 100%
        position: relative;
    
    }
    
    #nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    list-style: none;
    font-family: news gothic std;
    }  
    
       #nav li ul { position:absolute;top:!00% }
    
    
    
    /* main level link */
    #nav a {
    font-weight: normal;
    color: #00d6f6;
    text-decoration: none;
    display: block;
    padding: 10px 70px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
    }
    
    #nav a:hover {
    background: #white;
    color: #98015d;
    }
    
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
    background: white #98015durl(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -40px;
    color: #white;
    border-top: solid 1px #white;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
    }
    
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
    background: 98015d;
    border: none;
    color: #98015d;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    }
    
    #nav ul a:hover {
    background: #ff6c00 url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -100px !important;
    color: #98015d !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
    }
    
    /* dropdown */
            #nav {position:relative}
    
            #nav>li:hover  ul { left:0; }
    
    /* level 2 list */
    #nav   ul {
            left:-99999em;
    margin: 0;
            padding: 10px 0;
    		width:100%;
    		margin-top:-2px;
               /*position: static;*/
             /*top: 250px;*/
    	    /*left: 200px;*/
    background: #white url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 0;
    border: solid 1px #98015d;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
    }
    
    #nav ul li {
    		/*float: none;*/
    margin: 0;
              padding: 10px;
    }
    
    #nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
    }
    
    /* level 3+ list */
    #nav ul ul {
    left: 250px;
    top: -90px;
    }
    
    /* rounded corners of first and last link */
    #nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
    }
    
    #nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
    }
    
    /* clearfix */
    #nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }
    
    #nav {
    display: inline-block;
    }
    
    html[xmlns] #nav {
    display: block;
    }
    
    * html #nav {
    height: 1%;
    }
    Aside from a myriad of typos ( remember to put units in all your measurements!) you need to have position relative ONLY in your container(#nav) and then give position:absolute to the child ULs. After that ( and this is the part i didnt have time to work on.. you will need to copy your styling of your LIs to your anchors and use margin on the anchors and a border around #nav to create the white space you originally had.

    The reason for this drastic change is that in order for a drop down to remain open it must overlap by at least a pixel or two with the PARENT element. This is why I have the purple border overlapping with the gray of your container. So if you want to create the illusion of white space between the two menus you need to make the LIs transparent, and tall enough to extend bellow #nav.

    I know that sounds convoluted but hopefully it will help you get your site looking like you want it.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thank you for responding so quickly!

    Could you help with the second part when you have time?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    This might have to be done in steps. The next step is to remove overflow: hidden from here:

    Code:
    .tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    }
    That will allow the drop down menus to be seen. You should probably add a white background to the drop ULs, and set a width on them to stop them stretch full width.

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay. Where in the code does this need to be placed. It still is not showing up.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by pepperandherpup View Post
    Okay. Where in the code does this need to be placed. It still is not showing up.
    It's in this "widgets" CSS file:

    http://www.blogger.com/static/v1/wid...s_2_bundle.css

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    try this:
    Code:
    #nav {
    			/*margin: 230px;*/
    padding: 7px 8px 0;
    background: #white url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    width: 100%
        position: relative;
    
    }
    
    #nav li {
    		margin: 0 0 -28px 0;
    		padding: 0 0 38px;
    float: left;
    list-style: none;
    font-family: news gothic std;
    }  
    
       #nav li ul { position:absolute;top:100%;  }
    
    
    
    /* main level link */
    #nav a {
    font-weight: normal;
    color: #00d6f6;
    text-decoration: none;
    display: block;
    padding: 10px 70px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
    }
    
    #nav a:hover {
    background: #white;
    color: #98015d;
    }
    
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
    background: white #98015durl(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -40px;
    color: #white;
    border-top: solid 1px #white;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
    }
    
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
    background: 98015d;
    border: none;
    color: #98015d;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    }
    
    #nav ul a:hover {
    background: #ff6c00 url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 -100px !important;
    color: #98015d !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
    }
    
    /* dropdown */
            #nav {position:relative}
    
            #nav>li:hover  ul { left:0; }
    
    /* level 2 list */
    #nav   ul {
            left:-99999em;
    		margin: 12px 0 0 0;
            padding: 10px 0;
    		width:100%;
               /*position: static;*/
             /*top: 250px;*/
    	    /*left: 200px;*/
    background: #white url(http://1.bp.blogspot.com/-PsqSr0neal...b-gradient.png) repeat-x 0 0;
    border: solid 1px #98015d;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
    }
    
    #nav ul li {
    		/*float: none;*/
    margin: 0;
              padding: 0;
    }
    
    #nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
    }
    
    /* level 3+ list */
    #nav ul ul {
    left: 250px;
    top: -90px;
    }
    
    /* rounded corners of first and last link */
    #nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    	margin-left:10px;
    }
    
    #nav ul li:last-child > a {
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
    }
    
    /* clearfix */
    #nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }
    
    #nav {
    display: inline-block;
    }
    
    html[xmlns] #nav {
    display: block;
    }
    
    * html #nav {
    height: 1%;
    }
    I commented out everything that was not needed, and indented the things I changed or added that way you can learn from the experience
    ( I didnt see overflow in your posted code, just clearfix,bt)

    hope that helps

  8. #8
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright. I added the new code you posted above, but it's still not showing the full drop down menu.

    I tried adding the other css code to make the drop down menu part appear as a separate widget and it didn't do anything.

    What might I have done wrong?

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    if you were responding to ralph, are you sure you removed overflow:hidden from the rule?

    if that doesn't work, remove ralph's solution ( we don't want any unintentional code conflicts) and just put my code in your regular style sheet.

  10. #10
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the overflow:hidden and it didn't change anything.

    I removed ralphs code and tried put in the new one you posted and it still doesn't show the drop down menu.

    I have the code posted in a widget.

    Should I take it off the widget and paste in somewhere inside the actual blog html?

    Or is there something else that's missing with the code?

    You can click on the link again and see what it looks like to get a better look.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    overflow: hidden is still there. The menu can't work with that there.

  12. #12
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    overflow:hidden is not there. i honestly deleted it, like i said before.

    could i send one of you my log in info and you could truly see what the problem might be and fix it for me?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by pepperandherpup View Post
    overflow:hidden is not there. i honestly deleted it, like i said before.
    It's definitely still there, so may have been in more than one place. This is easy to check. Just right click on an element in a browser like Chrome and choose Inspect Element. A window opens showing you the HTML and the CSS that applies to it. This screen shot shows that overflow: hidden is still there in the widget bundle CSS file:

    oflow.png

  14. #14
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the slam hedger approach that you recommended and it definitely made it visible.

    The only problem now is that the menu is being covered underneath the title/date and right hand sidebar pictures. What do I need to specifically change in the code to fix that.

    And I also can not click on the menu. As soon as I move the cursor down to hover over or even click on a link (I only have one link currently attached to the menu, which is what I'm referring too) it just disappear.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    The next thing I would suggest is to change this (on line 684 in the styles at the top of your page):

    Code:
    #nav li ul { position:absolute;top:100%;  }
    to this:

    Code:
    #nav li ul {
      position: absolute;
      z-index: 100;
      background: white;
    }
    Notice that top: %100; is gone.

    There is a long way to go with this, but firstly get those styles in place, as they will fix a few major issues, such as the overlap of content below and the links disappearing when you try to click them.

  16. #16
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Definitely fixed the overlap and am able to hover over all of the sub menu titles.

    For the "Projects" menu title there are 5 sub menu titles and the very last one doesn't fit along with the others, instead it is positioned below the whole row.

    What part of the code can I tweak to get it to align and fit into the row and not overlap into it's own second row.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    What I would suggest is that you introduce a new rule that reduces the padding on the drop list links. For example, something like this:

    Code:
    #nav ul li a {
      padding: 10px 50px;
    }
    Also, I'm still finding that the sub ULs disappear as I try to hover over them, so perhaps add this extra line to what I gave before:

    Code:
    #nav li ul {
      position: absolute;
      z-index: 100;
      background: white;
      top: 40px;
    }


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
  •