3 replies [Last post]
petergus
petergus's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT+1
Joined: 2013-01-07
Posts: 2
Points: 3

i have a horizontal ul menu and am trying to get the child ul, that is also horizontal, to be part of flow (thus pushing elements down when it expands)
it seems this is not possible because it will either push the parent li to be wider, and if i make it absolute it is not part of the flow anymore.
one hack i came up with is to make an intermediary child li that is relative and then in effect the main child ul becomes a third level ul.

could there be a better solution? i have posted a lengthy description to stackoverflow and my hack idea on jsfiddle. i hope its ok to just post the links like that...(im new to this forum).

thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'd do something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
 
      ul {
      display: table;
      padding: 0;
      }
 
      li {
      display: inline-block;
      white-space: nowrap;
      width: 13em;
      }
 
      li li {
      display: none;
      width: auto;
      }
 
      li:hover li {
      display: inline-block;
      }
 
    </style>
  </head>
 
  <body>
    <p>dfhg</p>
    <ul>
      <li>Hover here for sub-menu
        <ul>
          <li><a href="#">daylight</a></li>
          <li><a href="#">solutions</a></li>
          <li><a href="#">design</a></li>
          <li><a href="#">something</a></li>
          <li><a href="#team">team</a></li>
        </ul>
      </li>
 
      <li>Yet another sub-menu
        <ul>
          <li><a href="#">daylight</a></li>
          <li><a href="#">solutions</a></li>
          <li><a href="#">design</a></li>
          <li><a href="#">something</a></li>
          <li><a href="#team">team</a></li>
	</ul>
      </li>
    </ul>
 
    <p>Hello text</p>
  </body>
</html>
If you prefer an onclick event handler, that should be rather trivial.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

petergus
petergus's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT+1
Joined: 2013-01-07
Posts: 2
Points: 3

thanks, thats really great,

thanks, thats really great, although i just dont know if i can have a set width on the main li. i guess thats the only way though!
thanks again!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Inline block

Elements displayed as inline-block shrink-wrap their contents by default. If a nested child element is wider than its parent, it will make the parent wider. The explicit width serves as a min-width so that its element and descendent elements fit without causing movement in the top list.

I hope that's clear. As I read it back, I'm not sure I understand what I said. Shock

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.