SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Threaded View

  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


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
  •