Hi,

I am trying to design my own css menu, the issue I have found is that my sub menu is not appearing and I am not clear as to why.

Here is my HTML:

<div id="MenuDiv">
<ul>
<li><a href="#">Home</a></li>
	<ul>
    <li>
		<li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
	</li>
    </ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

And My CSS:

#MenuDiv {
	width:800px;
	height:60px;
	background-color:#333;
	margin-left:auto;
	margin-right:auto;
}
#MenuDiv ul {
	margin:0;
	padding:0;
}
#MenuDiv li {
	list-style-type:none;
	float:left;
	text-decoration:none;
	display:block;
	width:150px;
	height:60px;
	border-left:1px solid #CCC;
	font-family:"serif", Times New Roman, Times;
	font-size:18px;
	text-align:center;
	line-height:60px;
}
#MenuDiv li:Hover {
	background-color:#CCC;
}
#MenuDiv li a {
	text-decoration:none;
	color:#FFF;
}
#MenuDiv ul ul {
	display:none;
}
#MenuDiv ul ul li {
	display:block;
}

Thank you in advance!

hope this helps

 

HTML

<ul id="menu">

<li>

<a href="#">Menu 1</a>

</li>

<li><a href="#">Menu 2</a>

<ul class="sub-menu">

<li><a href="#">Sub Menu 1</a></li>

<li><a href="#">Sub Menu 2</a></li>

<li><a href="#">Sub Menu 3</a></li>

<li><a href="#">Sub Menu 4</a></li>

</ul>

</li>

<li><a href="#">Menu 3</a></li>

</ul>

CSS

/*Initialize*/

ul#menu, ul#menu ul.sub-menu {

padding:0;

margin: 0;

}

ul#menu li, ul#menu ul.sub-menu li {

list-style-type: none;

display: inline-block;

}

/*Link Appearance*/

ul#menu li a, ul#menu li ul.sub-menu li a {

text-decoration: none;

color: #fff;

background: #666;

padding: 5px;

display:inline-block;

}

/*Make the parent of sub-menu relative*/

ul#menu li {

position: relative;

}

/*sub menu*/

ul#menu li ul.sub-menu {

display:none;

position: absolute;

top: 30px;

left: 0;

width: 100px;

}

ul#menu li:hover ul.sub-menu {

display:block;

}

Thank you! But I was really trying to understand what is wrong with my own code.

 

Any Ideas?

 

Thanks again!

Looks like you have a li tag to much

Your original markup:

<div id="MenuDiv">
<ul>
<li><a href="#">Home</a></li>
	<ul>
    <li>
		<li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
	</li>
    </ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Try this instead:

<div id="MenuDiv">
    <ul>
        <li><a href="#">Home</a>        <!-- If you want the submenu to be a child of the li don close the li tag here -->
	    <ul>
	        <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        <li>        <!-- Close it here instead -->
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

You also need to change the display of the dropdown from "none" to "block" when the user hovers:

Add this to your css

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

Edited September 29, 201411 yr by Nillervision

I'd recommend you hide the sub-nav by positioning it offscreen rather than display:none, as it stands users on screenreaders cannot access your submenu.

use this;

<ul>

<li><a href="#">menu1</a></li>

<ul>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

</ul>

<li><a href="#">menu1</a></li>

<ul>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

</ul>

<li><a href="#">menu1</a></li>

<ul>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

</ul>

<li><a href="#">menu1</a></li>

<ul>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

<li><a href="#">submenu1</a></li>

</ul>

<li><a href="#">menu1</a></li>

</ul>

You should shart your ul tag inside of li for creating a submenu or dropdown. and use display block. when the user hovers the menu then sub menu should be appear.