How to make menu bar with nested submenu css


Tags: html,css

Problem :

I want to make a menu with different background color having a submenu and a nested submenu both with different background color . When I hover over submenu list then it should display nested submenu .How to do it ? . This is my code .

    <html> <head> <title>Example of HTML Menu</title> 
<style type="text/css" media="screen"> 


#horizontalmenu ul { 
padding:1; margin:1; list-style:none; 
} 


#horizontalmenu li 
{ 
float:left; 
position:relative; 
padding-right:100; 
display:block; 
border:4px solid #CC55FF; 
border-style:inset; 

} 
#horizontal li 
{ 
float:left; 
position:relative; 
padding-right:100; 
display:block; 
border:4px solid pink; 
border-style:inset; 

} 


#horizontalmenu li ul 
{ 
display:none; 
position:absolute; 

} 

#horizontalmenu ul li:hover > ul {
        display: block;
    }
#horizontalmenu li:hover ul
{ 
display:block; 
background:red; 
height:auto; 
width:8em; 
background-color: green;
} 


#horizontalmenu ul ul ul{ 
clear:both; border-style:none;
left:100%;

} 




</style>
 </head> 
 <body> 
 <div id="horizontalmenu"> 

 <ul> 
 <li>
 <a href="#">News</a> 
 <ul> 
 <li>
 <a href="#">National</a></li> 
 <li>
 <a href="#">International</a></li> 
 <li><a href="#">Sport</a></li> 
 <li><a href="#">Hollybood</a></li> </ul> </li> 

 <li> <a href="#">Technology</a> 
 <ul> <li><a href="#">IT/Software</a></li> 
 <li><a href="#">Hardware</a></li> 
 <li><a href="#">Iphone</a>
 <ul class="horizontal"><li><a href="#">IT/Software</a></li> </ul></li> 

 <li><a href="#">Neuro-Science</a></li> </ul> </li> 

 <li> <a href="#">Sports</a> 
 <ul> <li><a href="#">Cricket</a></li> 
 <li><a href="#">Tenis</a></li> 
 <li><a href="#">Badminton</a></li> 
 <li><a href="#">Hockey</a></li> </ul> </li> 

 <li> <a href="#">Country</a> 
 <ul> <li><a href="#">India</a></li> 
 <li><a href="#">America</a></li> 
 <li><a href="#">France</a></li> 

 </ul>
 </li>
 </ul> 
 </div> 
 </body> 
 </html>

#horizontalmenu ul { 
padding:1; margin:1; list-style:none; 
} 


#horizontalmenu li 
{ 
float:left; 
position:relative; 
padding-right:100; 
display:block; 
border:4px solid #CC55FF; 
border-style:inset; 

} 
#horizontal li 
{ 
float:left; 
position:relative; 
padding-right:100; 
display:block; 
border:4px solid pink; 
border-style:inset; 

} 


#horizontalmenu li ul 
{ 
display:none; 
position:absolute; 

} 

#horizontalmenu ul li:hover > ul {
        display: block;
    }
#horizontalmenu li:hover ul
{ 
display:block; 
background:red; 
height:auto; 
width:8em; 
background-color: green;
} 


#horizontalmenu ul ul ul{ 
clear:both; border-style:none;
left:100%;

} 
 <div id="horizontalmenu"> 

 <ul> 
 <li>
 <a href="#">News</a> 
 <ul> 
 <li>
 <a href="#">National</a></li> 
 <li>
 <a href="#">International</a></li> 
 <li><a href="#">Sport</a></li> 
 <li><a href="#">Hollybood</a></li> </ul> </li> 

 <li> <a href="#">Technology</a> 
 <ul> <li><a href="#">IT/Software</a></li> 
 <li><a href="#">Hardware</a></li> 
 <li><a href="#">Iphone</a>
 <ul class="horizontal"><li><a href="#">IT/Software</a></li> </ul></li> 

 <li><a href="#">Neuro-Science</a></li> </ul> </li> 

 <li> <a href="#">Sports</a> 
 <ul> <li><a href="#">Cricket</a></li> 
 <li><a href="#">Tenis</a></li> 
 <li><a href="#">Badminton</a></li> 
 <li><a href="#">Hockey</a></li> </ul> </li> 

 <li> <a href="#">Country</a> 
 <ul> <li><a href="#">India</a></li> 
 <li><a href="#">America</a></li> 
 <li><a href="#">France</a></li> 

 </ul>
 </li>
 </ul> 
 </div> 



Solution :

Here i have applied/fixed your codes for the menu you are trying to achieve. You can change Background Color and Font Color easily. Wish this work for you.

#horizontalmenu ul {
  list-style: none;
    padding: 0;
}

#horizontalmenu > ul:after{
    clear:both;
    content:"";
    display:block;
}

#horizontalmenu > ul > li {
  float: left;
  position: relative;
  border: 1px solid #CC55FF;
}

#horizontalmenu > ul > li > a {
    text-decoration: none;
    padding: 5px 10px;
    display:block;
    color: black;
}

#horizontalmenu > ul > li > a:hover {
    background-color: lightgreen;
}


#horizontalmenu > ul > li > ul {
    background-color:red;
     display: none;
  width:150px;
  top:100%;
  left:0;
  position: absolute;
}

#horizontalmenu > ul > li > ul > li {
  position: relative;
   width:100%;
  display: block;
}

#horizontalmenu > ul > li > ul > li > a {
  text-decoration: none;
    padding: 5px 10px;
    display:block;
    color: black;
}

#horizontalmenu > ul > li > ul > li > a:hover {
  background-color:white;
}

#horizontalmenu > ul > li:hover > ul {
  display: block;
}

#horizontalmenu > ul > li > ul > li > ul {
    display:none;
    background-color:lightblue;
    position:absolute;
    left:100%;
    top:0;
      width: 150px;
  background-color: green;
}

#horizontalmenu > ul > li > ul > li > ul > li > a {
  text-decoration: none;
    padding: 5px 10px;
    display:block;
    color: black;
}

#horizontalmenu > ul > li > ul > li > ul > li > a:hover {
    background-color:yellow;
}

#horizontalmenu > ul > li > ul > li:hover ul {
  display: block;
}
<div id="horizontalmenu">
    <ul>
        <li>
            <a href="#">News</a>
            <ul>
                <li>
                    <a href="#">National</a>
                </li>
                <li>
                    <a href="#">International</a>
                </li>
                <li>
                    <a href="#">Sport</a>
                </li>
                <li>
                    <a href="#">Hollybood</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Technology</a>
            <ul>
                <li>
                    <a href="#">IT/Software</a>
                </li>
                <li>
                    <a href="#">Hardware</a>
                </li>
                <li>
                    <a href="#">Iphone</a>
                    <ul class="horizontal">
                        <li>
                            <a href="#">IT/Software</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Neuro-Science</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Sports</a>
            <ul>
                <li>
                    <a href="#">Cricket</a>
                </li>
                <li>
                    <a href="#">Tenis</a>
                </li>
                <li>
                    <a href="#">Badminton</a>
                </li>
                <li>
                    <a href="#">Hockey</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Country</a>
            <ul>
                <li>
                    <a href="#">India</a>
                </li>
                <li>
                    <a href="#">America</a>
                </li>
                <li>
                    <a href="#">France</a>
                </li>
            </ul>
        </li>
    </ul>
</div> 


    CSS Howto..

    How do I remove the white line under the nav bar

    How to fit a div container to cover all the remaining space in between?

    how to change the CSS linear-gradien backgroundt height (thickness)?

    How to set bold only to first level list elements? [duplicate]

    Foundation 5-How to center position the class 'row' regardless the browser size?

    How can I create button using pure CSS which involves linear gradients and background color

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    How to Update a Class in HTML given a new Firebase response?

    How to Center Text in a JavaScript Function?

    HTML CSS How to swap css attributes

    How to add multiple CSS classes to an single array

    How do I get my divs to ease in right after eachother on page load?

    php- How to strip CSS in the text

    How to create offer tag with css and pass value to it

    Simple html page renders differently in Firefox and IE. How to fix it?

    How to stretch segment of image in html/css

    How to dynamically positioning html table by using css properties?

    how to blur the background image only in css

    How to get logo to front layer

    How to make a CSS rule act differently inside another div tag?

    How to deploy a jekyll site locally with css, js and background images included?

    How to make layout using css and divs?

    CSS: How to shadow a field like this? [closed]

    How to set ASP dropdownlist to read only with css or javascript?

    How to minimize the number of CSS classes created?

    How to stretch vertical scroll?

    How can I make a background image of a site start off fitting to screen and then zoomable?

    How to deal with my sharepoint datetime control css?

    How to have two background-images with CSS? [duplicate]

    Rails 4 -how to write a view that displays instances in alternating format