SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop down display behind elements

    I am having an issue with a navigation drop down menu... The elements are showing behind the top image on all browsers EXCEPT IE.

    http://www.mymarketingsolutions.com/Site/Copyindex.html

    Any help would be appreciated
    Thanks in advance.

    Ryan.

    CSS:
    Code:
    #nav {
    	margin: 0;
    	padding: 0;
    	background: transparent;
    	line-height: 100%;
    	z-index: 1000;
    }
    
    #nav li {
    	margin: 0;
    	padding: 0;
    	width:140px;
    	float: left;
    	position: relative;
    	list-style: none;
    	background:url(../images/bg_menu.gif) top left no-repeat;
    	line-height:50px;
    }
    
    /* main level link */
    #nav a {
    	font-weight: bold;
    	color:#444444;
    	text-decoration: none;
    	display: block;
    	padding: 0;
    	margin: 0;
    	text-align:center;
    	font-family:Georgia, "Times New Roman", Times, serif; 
    	font-size:1.26em; 
    	font-weight:bold;
    }
    
    #nav a:hover {
    	background:url(../images/bg_menu-act.gif) top left no-repeat;
    	color: #fff;
    }
    
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
    	background:url(../images/bg_menu-act.gif) top left no-repeat;
    	color:#fff; 
    	text-decoration:none;
    	border-top: solid 1px #f8f8f8;
    }
    
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
    	background: none;
    	border: none;
    	color: #666;
    }
    
    #nav ul a:hover {
    	background:url(../images/bg_menu-act.gif) top left no-repeat !important;
    	color: #fff !important;
    }
    
    /* dropdown */
    #nav li:hover > ul {
    	display: block;
    }
    
    /* level 2 list */
    #nav ul {
    	display: none;
    	margin: 0;
    	padding: 0;
    	width: 140px;
    	position: absolute;
    	top: 35px;
    	left: 0;
    	border: solid 1px #b4b4b4;
    	font-size: 8px;
    	font-weight: bold;
    
    }
    #nav ul li {
    	float: none;
    	margin: 0;
    	padding: 0;
    }
    
    #nav ul a {
    	font-weight: normal;
    	text-shadow: 0 1px 0 #fff;
    }
    
    /* level 3+ list */
    #nav ul ul {
    	left: 181px;
    	top: -3px;
    }
    
    
    /* clearfix */
    #nav:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }
    #nav {
    	display: inline-block;
    }
    HTML:
    Code:
                        <nav>
                            <ul id="nav">
                                <li><a href="index.html" class="current">Home</a></li>
                                <li><a href="#">Company</a></li>
                                	<li><a href="http://">Solutions</a>
    
    		<ul>
    			<li><a href="managedmarketing.html">Managed Marketing</a></li>
    			<li><a href="webmarketing.html">Web Marketing</a></li>
    			<li><a href="marketingcollateral.html">Marketing Collateral</a></li>
    			<li><a href="promoproducts.html">Promotional Products</a></li>
    			<li><a href="emarketing.html">e-Mail Marketing</a></li>
    			<li><a href="marketingxpress.html">Marketing Xpress</a></li>
    				
    	</li>			
    		</ul>
                                <li><a href="whymms.html">Why Us?</a></li>
                                <li><a href="#">Programs</a></li>
                                <li><a href="#">Insights</a></li>
                                <li><a href="contact.html">Contact</a></li>                        
                            </ul>
                        </nav>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You have overflow:hidden on .container which is hiding the menu I think. Try removing it.

    You also have closing tags the wrong way around here:

    Code:
                            <li><a href="marketingxpress.html">Marketing Xpress</a></li>
                            </li>
                        </ul>
                        <li><a href="whymms.html">Why Us?</a></li>
    It should be:

    Code:
                            <li><a href="marketingxpress.html">Marketing Xpress</a></li>
                            </ul>
                        </li>
                        <li><a href="whymms.html">Why Us?</a></li>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome - This fixed the navigation menu... but.....

    Now the footer is not correct... The footer looks like it is starting in the middle of the page...

    Thank you..

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer starting mid page?

    http://www.mymarketingsolutions.com/Site/Copyindex.html

    Any help would be appreciated
    Thanks in advance.

    Ryan.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    You are using the .container class in other areas so just confine the rule I gave you to the header.

    Code:
    .container{overflow:hidden}
    header .container{overflow:visible}

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome - Works great..

    Again thanks a lot for the help.


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
  •