SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML element appear below parent element on hover

    Hello fellow coders!

    I am trying to use tutorials to understand how to make dropdown menus with CSS3. So far so good, except for one little snag. Let me begin by showing you my HTML:

    Code:
    <nav id='tabmenu'>
        <ul>
            <li><h2><a href='about.php' class='inactive'tabindex='4'>About</a></h2></li>
            <li><h2><a href='flash.php' class='inactive'tabindex='4'>Flash</a></h2></li>
            <li><h2><a href='writing.php' class='inactive'tabindex='4'>Writing</a></h2>
                <ul>
                    <li>
                        <a href='#' class='inactive' id='tech' onClick='toggleWritingType(this)' tabindex='10'>Technical</a>
                        <a href='#' class='inactive' id='jour' onClick='toggleWritingType(this)'' tabindex='9'>Journalism</a>
                    </li>
                </ul>
            </li>
            <li><h2><a href='design.php' class='inactive'tabindex='4'>Design</a></h2></li>
            <li><h2><a href='webs.php' id='active' tabindex='4'>Webs</a></h2>
                <ul>
                    <li><a href='#' class='active' id='cobra' onClick='toggleSShots(this)' tabindex='9'>Cobra Cabana</a></li>
                    <li><a href='#' class='inactive' id='hughes' onClick='toggleSShots(this)' tabindex='10'>Hughes, PhD</a></li>
                    <li><a href='#' class='inactive' id='rasche' onClick='toggleSShots(this)' tabindex='11'>Rasche</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    So, as you can see I have two submenus, and potentially one more if I can get this working. The tuts I found online created an absolute position for one submenu, which does not apply well to the second menu since they should not be in the exact same location. I think I now have a good understanding about how to use CSS3 to make submenus appear and reappear, but I'm not so clear on the placement. I would like the positioning to be relative to the parent <li> location. Can someone help me out with that?

    Here is my CSS for the nav:

    Code:
    #tabmenu {
    	width: 985px;
    	margin: 0 auto 10px;
    	height: 40px;
    	border-bottom: 1px #fff solid;
    }
    #tabmenu a{
    	background-color: #000;
    	color: #fff;
    	width:150px;
    	height:40px;
    	line-height: 40px;
    	float: right;
    	text-align:center;
    	text-decoration: none;
    }
    #tabmenu a.inactive:hover {
    	color: #999;
    	opacity: 0.7;
    	filter: alpha(opacity=70);
    	-khtml-opacity: 0.7;
    	-moz-opacity: 1;
    }
    #tabmenu a#active, #tabmenu ul a.active {
    	background-color: #fff;
    	color:#000;
    }
    #tabmenu ul ul {
    	display: none;
    }
    #tabmenu li:hover > ul { //This is the major area of concern, I believe.
    	display: block;
    	top: 40px;
    	position: relative;
    	height: 120px;
    	width: 150px;
    }
    I made a fiddle here.

    Thanks!
    Last edited by Stevie D; Nov 30, 2012 at 14:23. Reason: Link fixed

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's quite simple to do dropdowns with CSS (no CSS3 required). Here is a nice example:

    http://www.pmob.co.uk/temp/drop-down-basic-good.htm

    Have a look at the source code and it should explain what to do.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, got mine working!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad to hear it.


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
  •