SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Down Menu help

    Hi all.

    Thanks to this forum I have now designed my site which I am very happy with, but there is only final touch that I am having a problem with.

    http://pokerslice.net/random/navigation.html

    I am trying to create a drop down menu for the navigation.

    I have spent the last 2 hours going over tutorials and I still can't get my head around what I am doing wrong.

    I have already converted my html template to my wordpress site, and it seems for drop down menus they use the class "sub-menu" to style it.
    What I have gathered is that this sub-menu class applied to the sub <ul> should be display:none and then on hover it should display:block.
    I tried all this and spent hours trying to figure it out as nothing was working.

    I have uploaded a snippet of my navigation area above and would appreciate if anyone could take a look.

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset='UTF-8' />
    	
    	<title>Test</title>
    	
    	<link rel='stylesheet' href='new.css' />
    
    
    	<style type="text/css">
    * { margin: 0; padding: 0; }
    body { font-family: Georgia, serif; background: #bababa; font-size:10px;}
    li  {list-style: none;
    float:left;}
    
    /*Main Navigation Bar-------------------------------*/
    #nav_main{
    background:url(navmain.png) 0 0 repeat-x;
    width:1000px;
    height:30px;
    border-top: 1px solid #3b3b3b;
    border-bottom:1px solid #3b3b3b;
    font-size:1.5em;
    line-height:1.4em;
    font-family:arial;
    font-weight:bold;
    color: white;
    text-transform:uppercase;
    margin:0 auto;
    }
    #nav_main ul {
    padding-top:4px;
    float:left;
    margin-left:40px;
    }
    #nav_main li {
    padding-right: 2em;
    }
    
    /*Menu list styling*/
    #mainMenu {
    	clear:both;
    	zoom:1;
    	text-align:left;
    	text-transform:uppercase;
    }
    #mainMenu a {
    	color:#DEF;
    	text-shadow:0 0 2px #004;
    	text-decoration:none;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#FFF;
    	text-shadow:0 0 4px #04C;
    }
    #nav_main ul ul.sub-menu {
    position:absolute;
    float:left;
    }
    
    
    	</style>
    
    </head>
    
    <body>
    
    
    <!-- Navigation Main Start-->	
    						<div id="nav_main">
    								<ul id="mainMenu">
    									<li><a href="#">Home</a></li>
    										<ul class="sub-menu">
    											<li>Home Sub Menu1</li>
    											<li>Home Sub Menu2</li>
    											<li>Home Sub Menu3</li>
    										</ul>	
    
    									<li><a href="#">About</a></li>
    										<ul class="sub-menu">
    											<li>About Sub Menu1</li>
    											<li>About Sub Menu2</li>
    											<li>About Sub Menu3</li>
    										</ul>
    									
    									
    								</ul>
    																
    						</div>
    <!-- Navigation Main End -->	
    
    
    </body>
    
    </html>

    It is very confusing, I have tried altering the nav_main ul ul li properties but nothing came out right, and I need to use the sub-menu class for wordpress to read it.

    A few people suggested just using javscript or a wordpress plugin for dropdowns but I would really rather not take any shortcuts and learn how it's done properly.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, I have reworked your code which is below but here are the main points I want you to realize.

    You had your structure something like this for the dropdown
    Code:
    <li><a href="#">About</a></li>
                                            <ul class="sub-menu">
                                                <li>About Sub Menu1</li>
                                                <li>About Sub Menu2</li>
                                                <li>About Sub Menu3</li>
                                            </ul>
    Now, notice that the <li> at the very top gets CLOSED right after that anchor, THEN the dropdown comes into play. The nested <ul> needs to still be a child of the <li> to work. Well, it makes it easier proper .

    Now, also you should note that floating and absolute positioning never work together. Absolute positioining wins out. You had an element in your above CSS which had both. Now, also note that you are using a bad way of hiding/showing elements. Display:none/block si bad for screen readers and the only real good way to hide/show elements for a dropdown is to use a huge negative left margin to hide the dropdown, and on hover, set that margin to 0. In the below example I have commented briefly what changes I made in the CSS. The HTML all I changed was the positioning of the ending <li> which I already showed an example above. Hopefully you can study this example because thsi is basically all that you'll ever need for learning how a dropdown truely works. That's partly why your CSS wasn't working above, is because of your improper nesting. You weren't targeting anything .
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset='UTF-8' />
        
        <title>Test</title>
        
        <link rel='stylesheet' href='new.css' />
    
    
        <style type="text/css">
    * { margin: 0; padding: 0; }
    body { font-family: Georgia, serif; background: #bababa; font-size:10px;}
    li  {list-style: none;
    float:left;}
    
    /*Main Navigation Bar-------------------------------*/
    #nav_main{
    background:url(navmain.png) 0 0 repeat-x;
    width:1000px;
    height:30px;
    border-top: 1px solid #3b3b3b;
    border-bottom:1px solid #3b3b3b;
    font-size:1.5em;
    line-height:1.4em;
    font-family:arial;
    font-weight:bold;
    color: white;
    text-transform:uppercase;
    margin:0 auto;
    }
    #nav_main ul {
    padding-top:4px;
    float:left;
    margin-left:40px;
    }
    #nav_main li {
    padding-right: 2em;
    }
    
    /*Menu list styling*/
    #mainMenu {
        clear:both;
        zoom:1;
        text-align:left;
        text-transform:uppercase;
    }
    #mainMenu a {
        color:#DEF;
        text-shadow:0 0 2px #004;
        text-decoration:none;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
        color:#FFF;
        text-shadow:0 0 4px #04C;
    }
    #nav_main ul ul.sub-menu {
    position:absolute;
    left:0;
    top:0;/*these are coordinates so that the browser does not guess where to place*/
    margin-left:-999em;/*add this. and remove float:left*/
    }
    #nav_main ul li
    {
    position:relative;/*stacking context for dropdown*/
    }
    #nav_main ul li li
    {
        position:static;/*reset*/
    }
    #nav_main ul li:hover ul.sub-menu
    {
    /*these styles to be applied on hover*/
    top:100%;/*visual*/
    background:red;/*see it*/
    margin-left:0;/*mvoe back on screen*/
    }
    
        </style>
    
    </head>
    
    <body>
    
    
    <!-- Navigation Main Start-->    
                            <div id="nav_main">
                                    <ul id="mainMenu">
                                        <li><a href="#">Home</a>
                                            <ul class="sub-menu">
                                                <li>Home Sub Menu1</li>
                                                <li>Home Sub Menu2</li>
                                                <li>Home Sub Menu3</li>
                                            </ul>    </li>
    
                                        <li><a href="#">About</a>
                                            <ul class="sub-menu">
                                                <li>About Sub Menu1</li>
                                                <li>About Sub Menu2</li>
                                                <li>About Sub Menu3</li>
                                            </ul>
                                        </li>
                                        
                                    </ul>
                                                                    
                            </div>
    <!-- Navigation Main End -->    
    
    
    </body>
    
    </html>
    I bolded the selectors I changed. You can read the comments and change around postioning as you see fit. Hope I was able to help you .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent!! Thanks very much, looks so simple now!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad I was able to help.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am actually having a problem now with the hover.

    When I hover over a menu the dropdown will appear, but all the sub menus are different widths.

    I added width:65px; to the ul li li which made the drop down menus all the same width, but for some menus they have longer text and it doesn't look good.

    Any idea how to solve this?

    I checked this guys code with firebug https://www.servage.net/blog/wp-cont.../css-menu.html
    and I could not see him specify a width anywhere, so I am very confused how he is achieving the drop down menus to all be the same width, and more importantly adjusting the width automatically to longer text.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok think I fixed this by adding width 100% to the ul li li

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You'd *actually* fix it by unfloating the innner <li>'s because floating causes shrink wrapping to occur.

    Good job finding your own solution however .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •