SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Banging my head against a brick wall over a drop down menu!



    Kinda as the title states, Im trying to create a very simple drop menu, in total my main nav has 6 buttons, but when the FAQ button is hovered over, a drop down menu should appear to list 2 additional pages.

    I found a cracking CSS3 demo and have tried to decipher the code as best I can, but unfortunately I cant find away of revealing the sub menu on : hover...(Demo: Pure CSS3 Gradient Dropdown Menu (No Image Used))

    And another thing, Ive read in previous posts about certain individuals disliking the use of supurfluous <div> tags, the most common being mummifying the <ul>NAV</ul> in one. Well how does one go about centrally aligning the nav buttons say in a 960px width content box, so you will have a nice enough margin between each button BUT more importantly have equal distances to the left/right edges of the first/last buttons relative to the parent container they are situated in ? Its easy enough to do when you have a div wrapping around the whole NAV as you can just nudge the main UL to whatever you need too, but remove that div and Im stumped lol ?

    My HTML code so far is :

    <ul id="navMain">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Me</a></li>
    <li id="faq"><a href="sports_massage_body_massage_faq.html">FAQ</a>
    <ul id="subNav">
    <li><a href="sports_massage_faq.html">Sports Massage FAQ</a></li>
    <li><a href="body_massage_faq.html">Body Massage FAQ</a></li>
    </ul>
    </li><!--ends main FAQ-->
    <li><a href="sports_body_massage_prices.html">Prices</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>

    My CSS to date is :

    ul#navMain {
    width:960px;
    background-color:#8b8b8b;
    height:40px;
    list-style:none;
    }

    #navMain li{
    display:inline;
    }

    #navMain a{
    float:left;
    padding:0.5em 0.75em;
    background-color:#fff;
    color:#000;
    text-decoration:none;
    font-size:0.9em;
    margin:0.25em 1em 0 0.25em;
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -o-border-radius:0.5em;
    border-radius:0.5em;
    }

    /*not sure if this is the right way of going about it, because I cant get it back*/
    ul#subNav{
    display:none;
    }

    Thanks guys and gals

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    for centering the nav, w/o using an extra div.. you could rely on

    #mainNav {text-align:center;}
    #mainNav li{display:inline-block}

    But this technique is not w/o its draw back, requiring hacks for legacy IE, for example.

    about divs around UL> I am against those too. but I take into consideration that sometimes it's what you NEED TO DO.

    Straying off the topic slightly for a second. Imagine you wanted a fixed width page with 4 sections ( head, nav, content, footer) and that the side margin ( the part outside the fixed width) differed in color or bg... also that all section are fluid in height ( as it's most often should be)....

    you NEED to wrap other block element tags ( be it DIVs or ULs, etc) to achieve this effect. So really what it's being said about wrapping ULs is about the superfluous use of a DIV around a UL, whose style could have been incorporated to the UL itself.


    as for the rest this should solve your quandary:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type=text/css>
    		ul, li {margin:0; padding:0;}
    ul#navMain {
    width:960px;
    background-color:#8b8b8b;
    height:40px;
    list-style:none;
          text-align: center;
          padding:  .25em 0;
    }
    
    #navMain li{
            display:inline-block;
            position: relative; 
    }
    #navMain li:hover ul{
         display: block;
    }
    
    #navMain a{
     	display:block;
    padding:0.5em 0.75em;
    background-color:#fff;
    color:#000;
    text-decoration:none;
    font-size:0.9em;
    margin:0.25em 1em 0 0.25em;
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -o-border-radius:0.5em;
    border-radius:0.5em;
    }
    
    #navMain li li{
            display:block;
            margin-top:.25em;
    }
    #navMain li li a{
     background-color:orange}
    
    /*not sure if this is the right way of going about it, because I cant get it back*/
    #navMain ul{
    display:none;
        position: absolute;
        top:100%; 
        left:0;
        margin-top: -2px;
        width:180px
    
    }
    		</style>
    	</head>
    	<body>
    	<ul id="navMain">
    			<li><a href="index.html">Home</a></li>
    			<li><a href="about.html">About Me</a></li>
    			<li id="faq"><a href="sports_massage_body_massage_faq.html">FAQ</a>
    				<ul id="subNav">
    				<li><a href="sports_massage_faq.html">Sports Massage FAQ</a></li>
    				<li><a href="body_massage_faq.html">Body Massage FAQ</a></li>
    				</ul>
    			</li><!--ends main FAQ-->
    			<li><a href="sports_body_massage_prices.html">Prices</a></li>
    			<li><a href="testimonials.html">Testimonials</a></li>
    			<li><a href="contact.html">Contact</a></li>
    </ul>
    	</body>
    </html>
    My changes are highlighted in green. Hope that helps.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Dresden, I used the code in a new html doc to test and it works just great :-)

    Ive applied the code to my own Navigation, and it works to a certain extent, when you hover over the FAQ page the drop down menu appears, but 9/10 if you try and select 1 of the 2 pages from this drop down menu it dissapears as soon as you move your mouse off the main FAQ button.??

    Ive tried racking my head around this as I thought you might be able to possibly use the :after pseudo class on something but that failed miserabley, so if anybody else could suggest a fix, Id be most appreciative - Thankyou

    p.s (ignore the colours being used - there just so I can see element surface areas id anything overlaps/underlaps etc)

    My code is as follows:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title></title>
            <style type=text/css>
    
    #navigation{
    width:960px;
    height:35px;
    float:left;
    }
    
    ul#mainNav{
        list-style:none;
        margin:2.5em 0 0 11.5em;
    }
    #mainNav li{
        display:inline-block;
        position:relative;
    }
    
    #mainNav li:hover ul{
        display:block;
    }
    
    #mainNav a{
        color:#fff;
        display:block;
        background-color:#95ccef;
        -moz-border-radius:1em;
        -o-border-radius:1em;
        -webkit-border-radius:1em;
        border-radius:1em;
        font-size:0.9em;
        font-weight:bold;
        text-decoration:none;
        padding:0.4em 0.75em;
        margin:0 0.25em 0;
        text-shadow:1px 1px 1px #000;
    }
    
    #mainNav li li a{
        font-size:0.8em;
        width:150px;
        -moz-border-radius:0;
        -o-border-radius:0;
        -webkit-border-radius:0;
        border-radius:0;
        margin:0;
        padding:0.5em 0.5em;
    }
    
    #mainNav li li{
        display:block;
        width:150px;
    }
    
    #mainNav ul{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:150px;
        margin:0.25em 0 0 0;
        background-color:pink;
    }
    #mainNav li li a:hover {
        background-color:pink;
        color:#ff0;
    }
    </style>
        </head>
        <body>
    
    <div id="navigation">
    <ul id="mainNav">
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="sports_massage_body_massage_faq.html">FAQ</a>
            <ul>
        <li id="sports"><a href="sports_massage_faq.html">Sports Massage FAQ</a></li>
        <li id="body"><a href="body_massage_faq.html">Body Massage FAQ</a></li>
            </ul>
                </li><!--ends LI for the FAQ parent tag-->
        <li><a href="sports_body_massage_prices.html">Prices</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
    
    </body>
    </html>
    Last edited by Paul O'B; Jul 21, 2011 at 08:46. Reason: code tags added

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    It's because on "#mainNav ul" you give top:100% which will move it completely down from the <li>, and THEN you add .25em of top margin which will make the dropdown not even touching the <li> which means the mouse can't get to the dropdown because it'll disappear before it reaches it!

    Remove the top margin on there.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Ryan said the dropdown must always remain in contact with the parent trigger otherwise the hover effect is lost.

    You could create a gap by using a top border in the current background colour to give the illusion of space.

    Remove the margin top and add a border.
    Code:
    #mainNav ul{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:150px;
        border-top:10px solid #fff;
        background-color:pink;
    }

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent stuff Guys,

    Really chuffed with the end result, I cant thankyou enough! :-)

    This was my first time at creating a drop down menu, so I dont think it went too bad, I`ll know how to do it next time now!


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
  •