CODEWITHSUNDEEP
htmlcss
RS122
RS122

Reputation: 11

Navigation Submenu is not coming up

I have created a Navigation menu with sub menu. Can anyone please help me to find out why sub menu is coming as part of main menu?

Navigation have options like: Home, About, My Portfolio... My Portfolio have menu options: Web Development, Motion...

Issue: Web Development should have sub menu: Bootstrap, CSS but rather it is coming as part of main menu.<div id="Navigation"><ul class="Navigation"><li><a href="#">Home</a></li></ul>/div>

body {
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
  min-height: 100%;
}
.Navigation {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.Navigation li {
  height: auto;
  width: 150px;
  float: left;
  text-align: center;
  list-style: none;
  font: 12px"Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 3px;
  margin-left: 10px;
}
.Navigation a {
  padding: 13px;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px #fff;
  display: block;
}
.Navigation li ul {
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li:hover ul {
  display: block;
}
.Navigation li:hover,
a:hover {
  background: #e8e8e8;
}
<div id="Navigation">
  <ul class="Navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">My Portfolio</a>
      <ul>
        <li><a href="#">Web Development</a>
          <ul>
            <li><a href="#">Bootstrap</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Motion Graphics</a>
        </li>
        <li><a href="#">Flash Animation</a>
        </li>
        <li><a href="#">Logo Design</a>
        </li>
        <li><a href="#">Photography</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 65

Answers (4)

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

You'll just need to adjust your on-hover state rules so that they apply to elements you need to when you need it to.

.Navigation li:hover > ul {
    display: block;
}

.Navigation li > ul li:hover > ul {
    display: block;
}

See snippet below (note: I've reduced menu item widths slightly to fit them into the preview pane)

.Navigation li > ul li > ul {
    position: absolute;
    top: 0px;
    left: 127px;
}

.Navigation li > ul li > ul li {
    float: none;
}

.Navigation li > ul li {
    position: relative;
}

body{
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF,#D1D1D1	);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}

html{
  min-height:100%;
}

.Navigation{
	height: 50px;
    padding: 0;
	margin: 0;
	position: absolute;
}

.Navigation > li:first-child {
    margin: 0px;
}

.Navigation li 	{
	height: auto;
	width: 115px;
	float: left;
	text-align: center;
	list-style: none;
	font:12px "Bonveno", "Century Gothic";
	padding: 0;
	margin: 0;
	background-color: #eee;
	border: 1px solid #ccc;
	box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
	border-radius: 3px;
  margin-left:10px;
}

.Navigation a{							
	padding:13px;
	text-decoration: none; 
	color:#333;
	text-shadow: 0 1px #fff;
	display: block;
}
.Navigation li ul{
	display: none;
	height: auto;									
	margin-left: -11px;
	padding: 0;		
}	

.Navigation li:hover > ul {
    display: block;
}

.Navigation li > ul li:hover > ul {
    display: block;
}

.Navigation li:hover, a:hover {
	 background: #e8e8e8;
}
<div id="Navigation">
			<ul class="Navigation">
           		<li><a href="#">Home</a></li>
				      <li><a href="#">About</a></li>
            	<li><a href="#">My Portfolio</a>
					      <ul>
                  <li><a href="#">Web Development</a>
                      <ul>
                        <li><a href="#">Bootstrap</a></li>
                        <li><a href="#">CSS</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Motion Graphics</a></li>
                  <li><a href="#">Flash Animation</a></li>
                  <li><a href="#">Logo Design</a></li>
                  <li><a href="#">Photography</a></li>
					      </ul>         
			 	      </li>
             	<li><a href="#">Services</a></li>
             	<li><a href="#">Contact</a></li>            
            </ul>
        </div>

From here, you can simply add further styles (if necessary) to sub-menu items 2 levels, or deeper, to appear to the right of the parent menu item (rather than below).

Align sub-menu to right:

The rules below serve only to demonstrate how to get you there. I'd recommend refining them.

.Navigation li > ul li > ul {
    position: absolute;
    top: 0px;
    left: 127px;
}

.Navigation li > ul li > ul li {
    float: none;
}

.Navigation li > ul li {
    position: relative;
}

Upvotes: 0

hamidrun
hamidrun

Reputation: 25

body {
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
  min-height: 100%;
}
.Navigation {
  height: 50px;
  padding: 0;
  margin: 0;
  position: relative;
}
.Navigation li {
  height: auto;
  width: 150px;
  float: left;
  text-align: center;
  list-style: none;
  font: 12px"Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 3px;
  margin-left: 10px;
}
.Navigation a {
  padding: 13px;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px #fff;
  display: block;
}
.Navigation li ul {
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
  position: absolute;
}
.Navigation li ul li ul {
  display: none !important;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li:hover ul {
  display: block;
}
.Navigation li ul li:hover ul {
  display: block !important;
}
.Navigation li:hover,
a:hover {
  background: #e8e8e8;
}
<div id="Navigation">
  <ul class="Navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">My Portfolio</a>
      <ul>
        <li><a href="#">Web Development</a>
          <ul>
            <li><a href="#">Bootstrap</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Motion Graphics</a>
        </li>
        <li><a href="#">Flash Animation</a>
        </li>
        <li><a href="#">Logo Design</a>
        </li>
        <li><a href="#">Photography</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

Upvotes: 0

Sankar
Sankar

Reputation: 7107

Try this...

body {
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
  min-height: 100%;
}
.Navigation {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.Navigation li {
  height: auto;
  width: 150px;
  float: left;
  text-align: center;
  list-style: none;
  font: 12px"Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 3px;
  margin-left: 10px;
}
.Navigation a {
  padding: 13px;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px #fff;
  display: block;
}
.Navigation li ul {
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li ul li ul {
  display: none !important;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li:hover ul {
  display: block;
}
.Navigation li ul li:hover ul {
  display: block !important;
}
.Navigation li:hover,
a:hover {
  background: #e8e8e8;
}
<div id="Navigation">
  <ul class="Navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">My Portfolio</a>
      <ul>
        <li><a href="#">Web Development</a>
          <ul>
            <li><a href="#">Bootstrap</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Motion Graphics</a>
        </li>
        <li><a href="#">Flash Animation</a>
        </li>
        <li><a href="#">Logo Design</a>
        </li>
        <li><a href="#">Photography</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

Upvotes: 0

Zay Lau
Zay Lau

Reputation: 1864

It is because you have a CSS rule for .Navigation li:hover ul { display: block; } that I believe you want to show the second level menu on first level item hover. But this rule is also applying to the third level menu (that means all ul under the first level item hovers are applied display: block;), you may want to use

.Navigation li:hover > ul instead

Upvotes: 1

Related Questions