View Full Version : Vertical Navigation Menu Problem

11-13-2012, 08:00 AM
Hey everyone if someone could help me out, having some problems with a basic nav bar.

http://prntscr.com/jk4qm (basic nav bar looks like)
http://prntscr.com/jk4te (sub menu)

what it should start looking like however when i resize the browser the submenu moves around.
when i tried to make it display block, it appear underneath it but blocks the rest of the menu and there was 1 other thing i tried but it makes it so when you hover over the menu a large empty space appears under the "other services" ul

Thanks for the Help its greatly appreciated.

my html is this:

<li style="cursor: pointer;" onclick="document.location.href='index.html';">HOME</li>
<li style="cursor: pointer;" onclick="document.location.href='aboutus.html';">ABOUT US</li>
<li style="cursor: pointer;" onclick="document.location.href='courses.html';">COURSES</li>
<ul id="dropdown">
<li style="cursor: pointer;" onclick="document.location.href='courses.html';">AGENCY</li>
<li style="cursor: pointer;" onclick="document.location.href='courses.html';">MAKEUP MECCA</li>
<li style="cursor: pointer;" onclick="document.location.href='gallery.html';">GALLERY</li>
<li style="cursor: pointer;" onclick="document.location.href='faq.html';">FAQ</li>
<li style="cursor: pointer;" onclick="document.location.href='contactus.html';">CONTACT US</li>

and the CSS is:

* {
margin: 0;
html, body {
height: 100%;
li, a{text-decoration:none; color:#FFF; font-family: "BebasNeue-webfont", Arial, Helvetica, sans-serif; font-size:24px;}
ul{text-decoration:none; list-style:none;}
nav li #dropdown{ position:absolute; left:27%}
nav li #dropdown li{color:#FFF; min-width:150px;}
nav li #dropdown li:hover{color:#F90;}
nav li:hover{margin-right:0px;}
nav li{
border-bottom:3px ridge #000;
border-left:10px groove #FFF;
nav li:hover{
color: #ff9933;
nav ul ul {
display: none;

nav ul li:hover > ul {
display: block;

Tried several different ways this was the last one before i completely couldnt figure it out T__T

11-13-2012, 11:15 AM
Tell the url of website.

11-13-2012, 12:42 PM
dont have the website link yet, still building it. wont have the link till the domain is transferred from a previous host (which is a different website which is being scrapped for this new one)

whats the normal way to make a nav menu like this?
what parameters would normally be used?

normal dropdowns are fairly easy its just these one that have a sub menu appear horizontal to the parent that seem to give me issues.