positioning my css menu [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to update on of my company's website menu and i've managed to do everything except when the menu's extend their width on mouse hover, level 2 and level 3 lists stack up on top of each other. I understand its because i made the positioning of absolute rather than relative to avoid level 1 menus from moving up and down on hover. Anyone has any suggestion on how i can manage to show submenus and keep the main menu not move around on mouse hove?
here's the my jsfiddle code, http://jsfiddle.net/#&togetherjs=hyRjkxLPGH.
thanks!

Answer 1

There were a number of issues with your Fiddle. First of all, the only element that should be inside a <ul> tag is an <li> tag, not text. Secondly, you were using absolute positioning nearly correctly, but you need to give each li a relative position.
I've included a basic (somewhat stripped down) solution for you below. You can also find this at this fiddle.
You can reinsert your styles pretty easily I'm sure, perhaps use more classes and less CSS selectors (have you ever used SCSS?)
HTML
<ul class="menubar">
<li>menu1
<ul>
<li>submenu1
<ul>
<li>submenu11</li>
<li>submenu12</li>
<li>submenu13</li>
</ul>
</li>
<li>submenu2
<ul>
<li>submenu21</li>
<li>submenu22</li>
<li>submenu23</li>
</ul>
</li>
<li>submenu3
<ul>
<li>submenu31</li>
<li>submenu32</li>
<li>submenu33</li>
</ul>
</li>
</ul>
</li>
<li>menu2
<ul>
<li>submenu1
<ul>
<li>submenu11</li>
<li>submenu12</li>
<li>submenu13</li>
</ul>
</li>
<li>submenu2
<ul>
<li>submenu21</li>
<li>submenu22</li>
<li>submenu23</li>
</ul>
</li>
<li>submenu3
<ul>
<li>submenu31</li>
<li>submenu32</li>
<li>submenu33</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menubar, .menubar ul {
list-style: none;
margin: 0;
padding: 0;
}
.menubar > li {
display: inline-block;
position: relative;
}
.menubar li ul {
display: none;
}
.menubar li:hover > ul {
display: block;
position: absolute;
width: 100px;
}
.menubar li:hover > ul > li {
position: relative;
}
.menubar > li > ul > li ul {
position: absolute;
top: 0;
left: 100px;
}