How can I wrap the content around the UL CSS menu so that the content is seamless?

Question

thanks for the help

Here's the ready-made code for IE, Firefox, Safari, and Chrome: http://jsbin.com/eyoda4

---

I created a simple CSS UL drop-down menu, so when the user hovers over the specified link, the menu pops up for the user to select.

The problem I am facing is that I want the content to wrap around the UL menu so that the UL looks seamless / hidden in the content without interruptions in the content.

This is a demonstration of the problem and my code. As you can see, the content does not flow around UL.
DEMO: http://jsbin.com/uzidu4/

This demo is an idea of ​​how I want the content to flow around the menu.
Note. This example will not work, because in this example there is no UL - this is just a visual
demo: http://jsbin.com/uzidu4/2/

Thank you for your help!

Answer 1

(only responding to your update)

To make it work in IE7, you can add this:

<!--[if IE 7]>
<style>
.inline-list, ul.program-menu li {
  display: inline;
  zoom: 1
}
</style>
<![endif]-->

---

I also recommend adding this to stop annoying text when you hover over a dropdown menu:

ul.program-menu li {
    position : relative;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff
}

(I tried transparentbut changed the menu a bit in IE7)

http://jsbin.com/uzidu4/21

Answer 2

, , , - , , , .

Answer 3

.

, . , , , display: inline node. , node , .

, , : "" :

<ul id="menu1" class="menu-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis libero sit amet nisi pellentesque dapibus. <span id="menu1-trigger" class="menu-trigger">Menu</span> Etiam iaculis, erat sit amet adipiscing venenatis</p>

.menu-items , #menu1 , #menu1-trigger.

This is probably best done with javascript, since you cannot reliably predict the screen resolution or font size, and therefore you cannot predict the actual position of any given inline element.

Note that the content will not flow around the menu items, the menu items will overlap the content. It was not clear whether this is really what you wanted.