0

I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link. I have been on this for a couple of hours and any help would be greatly appreciated.

Here is the html part :

<div class="nav"> <ul id="menu"> <li><a href="#" class="current">Home</a></li> <li><a href="#">Apetiziers</a> <ul> <li><a href="#">Sub-Link 1</a></li> <li><a href="#">Sub-Link 2</a></li> <li><a href="#">Sub-Link 3</a></li> <li><a href="#">Sub-Link 4</a></li> </ul> </li> <li><a href="#">Entree</a> <ul> <li><a href="#">Sub-Link 1</a></li> <li><a href="#">Sub-Link 2</a></li> <li><a href="#">Sub-Link 3</a></li> <li><a href="#">Sub-Link 4</a></li> </ul> </li> <li><a href="#">Main Course</a> <ul> <li><a href="#">Sub-Link 1</a></li> <li><a href="#">Sub-Link 2</a></li> <li><a href="#">Sub-Link 3</a></li> <li><a href="#">Sub-Link 4</a></li> </ul> </li> <li><a href="#">Dessert</a> <ul> <li><a href="#">Sub-Link 1</a></li> <li><a href="#">Sub-Link 2</a></li> <li><a href="#">Sub-Link 3</a></li> <li><a href="#">Sub-Link 4</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </div>

And the .css :

ul#menu { float: left; margin: 0; width: auto; padding: 0px 40px 0px; background: #333; color: #fff; line-height: 100%; } ul#menu li { display: inline; } /* top level link */ ul#menu a { float: left; padding: 10px 16px; margin-right: 0px; background: #789; color: #fff; text-decoration: none; border-right: 1px solid #e2e2e2; } /* main level link hover */ ul#menu a.current { background: #f60; color: #fff; } ul#menu li:hover > a { color: #fff; background: #ff4500; text-decoration: underline; } /* dropdown */ ul#menu li:hover > ul { display: block; /* shows the sub-menu (child ul of li) on hover */ } /* sub level list */ ul#menu ul { display: none; /* hides the sub-menu until you hover over it */ margin: 0; padding: 0; width: 140px; position: absolute; top: 35px; left: 0; background: #000; border: solid 1px #ccc; } ul#menu ul li { float: none; margin: 0; padding: 0; } ul#menu ul a { font-weight: normal; background: #9BB3BF; color: #036; } /* sub levels link hover */ ul#menu ul li a:hover { color: #036; background: #DDDF99; }
Improve this question
1

4 Answers 4

Reset to default
1

If you are free to change the CSS style, why not think of doing something like this. Why not try with this CSS style?

HTML

<ul class="nav"> <li> <a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu Item</a></li> <li><a href="#">Sub Menu Item</a></li> <li><a href="#">Sub Menu Item</a></li> </ul> </li> <li> <a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu Item</a></li> <li><a href="#">Sub Menu Item</a></li> <li><a href="#">Sub Menu Item</a></li> </ul> </li> <li> <a href="#">Menu 3</a> <ul> <li><a href="#">Sub Menu Item</a></li> <li><a href="#">Sub Menu Item</a></li> <li><a href="#">Sub Menu Item</a></li> </ul> </li> </ul>

CSS

* {font-family: "Segoe UI", Tahoma;} ul.nav {border-bottom: 1px solid #999;} ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;} ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;} ul.nav li a:hover {background: #ccc; border: 1px solid #999;} ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;} ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;} ul.nav > li:hover ul {display: block;} ul.nav > li ul li {display: block;} /* Vertical Menu */ ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

Fiddle:
http://jsfiddle.net/vMuxA/ (Vertical Menu)
http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

@Starx Good question. To stop reinventing the wheel.
@Starx There's no difference from the OP's code. He has to understand the CSS and apply accordingly. Check both the mark up.
How will he understand, you have not explained anything? Why would this fix the problem and what wrong did he do?
No need of using float and position here. Well, do you understand CSS?
If that is the your question then No Praveen, I do not understand CSS.
|
0

If cannot want use : position:relative, then use : left:auto; instead : left:0; http://codepen.io/anon/pen/KAGhL But position relative will be usefull and will give ability to set z-index to keep menu on top of other element

Improve this answer

2 Comments

sorry, I am not sure I understand your answer
or you use position:relative on parent <li> and left:0; on submenu, or just use left:auto on submenu and display:inline-block on <li>. if you give : position:relative:z-index:1; submenu will always show on top of other content. :)
0

It is probably jumping towards the closest relative container. So configure your list to act as relative container:

ul#menu > li { position: relative; }

Also there was unnecessary float in your anchor tags, your li are already set to display as inline there is no point in float them

ul#menu a { display: inline-block; padding: 10px 16px; /* ... */ }

Here your fixed code

Improve this answer

2 Comments

HI, I did try that but now the drop down menu appears on the right side of the furthest right main link...
@wizzme, I was hoping you could fix the rest. Check my update for the fiddle with the fix
0

Try clearing your floats on the parent elements.

Improve this answer

1 Comment

Welcome to StackOverflow! It's best if you provide a short snippet of code demonstrating the solution. Thanks!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.