Solved

sub list behind menu

Posted on 2013-06-02
1
436 Views
Last Modified: 2013-06-03
Hi,

My sub menu doesnt display properly as it appears partly above and behind the the current link I am hovering on.

How do I fix this?
*{
    margin:0;
    padding:0;
	 list-style-type: none; 
}

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
  
   
    #nav-status {
        display: none;    
    }

    ul#mynav {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul#mynav li {
        color:#000;
        border-right: 1px solid #333;
        
        height: 21px;
        padding:2px;
        position: relative; 
		list-style-type: none;  
    }

    ul#mynav li:last-child {
        border-right: none;
    }

  

    ul#mynav li:hover ul {
        display: block;    
    }
	
	ul#mynav a {
		display:block;
		width: 100%;
		  color:#fff;
        background:#666;
       
	}
	
	  ul#mynav li ul {
       
	    display: none;
        
        color:#fff;
        background:#666;
        position: absolute; 
        top: 0px; 
        left: 50px;
        overflow: hidden;
    }
    .more{
        display:none;
    }
}


<ul id="mynav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
        <a href="#">Item 5 <span class="more">></span></a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>
</div>

Open in new window

0
Comment
Question by:jagguy
1 Comment
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39215361
Change your style sheet to:

*{
    margin:0;
    padding:0;
	 list-style-type: none; 
}

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
  
   
    #nav-status {
        display: none;    
    }

    ul#mynav {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul#mynav li {
        color:#000;
        border-right: 1px solid #333;
        height: 21px;
        padding:2px;
		list-style-type: none;  
    }

    ul#mynav li:last-child {
        border-right: none;
    }

  

    ul#mynav li:hover ul {
        display: block;    
    }
	
	ul#mynav a {
		display:block;
		width: 100%;
		  color:#fff;
        background:#666;
       
	}
	
	  ul#mynav li ul {
       
	    display: none;
        
        color:#fff;
        background:#666;
        position: absolute; 
        left: 50px;
        overflow: hidden;
    }
    .more{
        display:none;
    }
}

Open in new window

0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now