CSS - Horizontally style list without using absolute positioning and JS

Question

Is it possible to create a horisontally styled menu (like on image below) without using absolute positioning or JS?

Trying to create a menu. It uses standard unordered list to display.

Here is what I'm trying to achieve:

(Green list is a submenu of "How are you". It has a line break because it is limited by width.)

And currently what I have is this:

This is the pen: http://codepen.io/olegovk/pen/NNREMY

And the code:

HTML

<nav>
  <ul>
    <li><a href="#">Hello</a></li>
    <li><a href="#">How are you</a>
      <ul>
        <li><a href="#">Allright!</a></li>
        <li><a href="#">And you?</a></li>
        <li><a href="#">Fine</a></li>
        <li><a href="#">La-la-la</a></li>
        <li><a href="#">Bla-bla-bla</a></li>
        <li><a href="#">Cheerio!</a></li>
      </ul>
    </li>
    <li><a href="#">Good bye</a></li>
  </ul>
</nav>
<div class="clear"></div>
<p>Some paragraph to make sure it's below the menu.</p>

CSS

.clear {
  clear: both;
}
p {
  background-color: lightgrey;
}
li {
  float: left;
  list-style: none;
  display: list-item;
  margin: 0 0.5em;
}
li li {
  margin: 0 1em;
}
li li a {
  color: green;
}
nav ul ul{
  max-width: 300px;
}

I know it's possible with absolutely positioning child lists or with JS. But absolute positioning of child lists takes them out of doc flow. As a result they overlap with content below them. Also I can't use JS.

score 0 · Answer 1 · answered Mar 14 '16 at 14:14

0

for li li use this css style .

li li {
margin: 0 1em;
position:relative;
left:-110px;
}

and give a id to good bye li and then write it css e.g

   <li><a href="#" id='someId'>Good bye</a></li>

li #someId{
  position:relative;
  left:-150px;

 }

answered Mar 14 '16 at 14:14

Asad

2,264
4
17
45

Thanks for that. However that would require styling each menu item individually. And since this is a menu, it's items may change. Need a more future proof solution. – Oleg Mar 14 '16 at 14:33
yes you are right . but absolute or fixed position is the general way to make menus . consider them – Asad Mar 14 '16 at 18:52

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

Seems that it's impossible.

Here is another similar question: Position: absolute and parent height?

With regards to the menu, to achieve the desired result, the only solution is to have top level menu and sub-menu in different lists. That way no need to position sub-menu (second level list) absolutely.

edited May 23 '17 at 11:45

Community

1
1

answered Mar 15 '16 at 09:49

Oleg

259
2
10

CSS - Horizontally style list without using absolute positioning and JS

2 Answers2