Help me make a subnavigation

Hello I’m trying to build a website and I’m using a template from template monster.

My site is

I’m trying to make a drop down navigation.

I tried editing the code by putting this in

.menu ul li ul {display: none;}
.menu li:hover ul{ display:block; width:160px;font-size:.5em; background-color:#64715; position: absolute; left:50px; top:50px }

I tried but every time I hover over it distorts the whole design.

Which menu items are means to have a dropdown? I don’t see any sub ULs there.

sorry let me update it, I was actually editing my copy on my computer not the server =[ I really want the subnavi to be a vertical list. It keeps coming out to be a horizontal one.

This is the code that I just added:


<div id=“gameMenu”>
<li><a href=“index-2.html”>Mine Craft</a></li>
<li><a href=“index-3.html”>Counter Strike 1.6</a></li>
<li><a href=“index-5.html”>Counter Strike Source</a></li>


.menu ul ul{display:none;}
.menu ul ul{display:list-item; position: absolute; left: 0px; top: 100px; font-size: 0.5em;}

Try adding this:

.menu ul li { float:none;}

That would make it go back to a “vertical” drop… style the rest to taste.

Hope that helps.

To make a dropdown menu you will want to hide the sub list off screen with a large negative margin.
Then you set that margin to zero on li:hover to reveal the sub list.

Here are a couple of simple examples that show the basic concept, view the page source for the css and html.

Thanks for the help guys.

I used the float:none method and it works great.

Now I have another issue. When I hover over “VPS Server” menu it will pop open the subneavigation but it won’t let me rollover to them. I think because the logo is blocking it. I’ve tried chaning the z-index but that didn’t work. How can I fix this?

Also how can I remove that double gray line under the navigation bar. Everytime I roller over a menu it gets distorted.

Thank for the help in advance.


You need to follow the examples that Ray gave otherwise this will never work properly. The submenus need to be position:absolute and you need this sort of code to make it work.

.menu ul{overflow:visible;height:40px}
.menu ul li li {display:block;float:none;}
.menu ul li{position:relative;}

.menu ul ul {
.menu li:hover ul{margin-left:0;}

That code should follow your original and will start to get things back on track.

Note that only positioned elements can have a z-index so adding z-index:3 to .menu will do nothing unlkess you also add position:relative.

Thanks for the help. This worked perfectly.