Solved

sub list behind menu

Posted on 2013-06-02
1
442 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

690 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