Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2009
    Location
    Hamphire, UK
    Posts
    47
    Thanks
    7
    Thanked 1 Time in 1 Post

    Css-based menu won't work

    I've built many a css-based dropdown menu before, but this time it won't work! Am I missing something?
    When I hover over the link that should make the drop down appear, nothing happens!

    With this menu I'm trying to replicate something along the lines of the menu found on the Cisco website (http://www.cisco.com), so that the dropdowns can contain columns of links.

    What I have so far is:

    Code:
        <div id="navbar">
       	  <ul id="navlist">
       	  <li class="level1"><a href="#">Home</a></li>
                <li class="level1"><a href="#">Services</a>
                	<div class="panelwrap">
                    	<p>Title of Services</p>
                        <div class="panelcol">
                        	<ul>
                            	<li><a href="#">Service A</a></li>
                                <li><a href="#">Service B</a></li>
                                <li><a href="#">Service C</a></li>
                            </ul>
                        </div>
                        <div class="panelcol">
                        	<ul>
                            	<li><a href="#">Service A</a></li>
                                <li><a href="#">Service B</a></li>
                                <li><a href="#">Service C</a></li>
                            </ul>
                        </div>
                        <div class="panelcol">
                        	<ul>
                            	<li><a href="#">Service A</a></li>
                                <li><a href="#">Service B</a></li>
                                <li><a href="#">Service C</a></li>
                            </ul>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
              </li>
                <li class="level1"><a href="#">About Us</a></li>
                <li class="level1"><a href="#">Contact</a></li>
            </ul>
            <div style="clear:both;"></div>
    	</div><!--end of navbar-->
    and the CSS for it is:

    Code:
    #navbar {
    	border: #090 2px solid;
    	height: 35px;
    }
    
    #navlist {
    	list-style: none;
    	padding-top: 8px;
    	
    }
    
    #navlist a {
    	text-decoration: none;
    	color: #090;
    }
    
    .level1 {
    	float: left;
    	margin-left: 50px;
    }
    
    .panelwrap {
    	position: absolute;
    	left: -999em;
    	margin-top: 10px;
    	width: 300px;
    	border: #090 solid 2px;
    }
    
    .panelcol {
    	float: left;
    	width: 33%;
    }
    
    .panelcol ul{
    	list-style: none;	
    }
    
    .panelcol ul li{
    	
    }
    
    .panelcol ul li a{
    	display: block;	
    	font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
    	text-decoration:none;
    	font-size:0.8em;
    	line-height:1.55em;
    	text-align:center;
    	color:#FFF;
    }
    
    #navlist li a:hover {
    	color: #F00;	
    }
    
    #navlist li a:hover {
    	left: auto;
    }
    If anyone can see why the dropdown won't appear, please let me know!

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No time to check out all your source, but I just made a mega menu dropdown from scratch and can put the barebones demo up for you: http://blog.pressedweb.com/demos/css_mega_dropdown/

    Copy/paste the CSS (.php) and beautify it with: http://www.codebeautifier.com

    It's not much code at all actually. Works in IE7+ and it would probably work in IE6 if you made the :hover selector target an anchor element instead of the entire <li>. Otherwise you can always throw something like http://code.google.com/p/ie7-js/ or http://code.google.com/p/stan-js/ in it to make IE6 listen.

  • #3
    New Coder
    Join Date
    Jun 2009
    Location
    Hamphire, UK
    Posts
    47
    Thanks
    7
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Aple View Post
    No time to check out all your source, but I just made a mega menu dropdown from scratch and can put the barebones demo up for you: http://blog.pressedweb.com/demos/css_mega_dropdown/
    Thanks for that Aple, but I was hoping for someone to give me some advice; I want to learn what I did wrong, not just use someone else's code.

    I don't mean to sound ungrateful.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I want to learn what I did wrong, not just use someone else's code.
    Good for you.

    Your :hover statement isn't quite right:

    Code:
    #navlist li a:hover {
    	left: auto;
    }
    should be something like:

    Code:
    #navlist li.level1:hover .panelwrap {
    	left: auto;
    }
    - so, when a user hovers on the top level li, the .panelwrap within that li is displayed.

  • Users who have thanked SB65 for this post:

    thresher (08-20-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •