CSS: меню с выпадающим списком в той же строке, что и остальные + IE

Question

    <div id="menu">
    <ul class="menu">
          <li><a href="home.php">TEM</a></li>
          <li><a href="#">TEM</a></li>
          <li><a href="#">TEM</a></li>
          <li><a href="#">TEM</a></li>
          <li><a href="#">TEM</a></li>
    </ul>
    <img src="images/button.png" width="126" height="23" class="menu_class">
    <ul class="the_menu">
    <li><a href="#">Profil</a></li>
    <li><a href="#">Inställningar</a></li>
    <li><a href="#">Vänner</a></li>
    <li><a href="#">Bildgalleri</a></li>
    <li><a href="#">Diskoteker</a></li>
    <li><a href="#">Evenemanger</a></li>
    </ul>
</div>

HTML

CSS:

.menu_class {
    border:1px solid #1c1c1c;
}

.the_menu {

    position:absolute; 
    display:none;
    width:150px;
    border: 1px solid #1c1c1c;
}

.the_menu li {
    background-color: #283d44;
}

.the_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #fffc30;
}
#menu{
    float: right;
    list-style: none;
    margin-top: 10px;
    padding: 0;
}
.menu li {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.menu a {
    color: #94938e;
    display: block;
    float: left;
    margin: 0;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
}

.menu a:hover {
    color: #f7f400;
    text-decoration: none;
}    

Что я хотел бы сделать: Наличие меню с выпадающим меню, помимо других ссылок меню "TEM"

Что происходит в FF: это похоже на
для меню, почему я не могу понять

Что происходит в IE: он размещает меню там, где я хочу, хотя, когда я делаю указатель мыши (когда

изображение для выпуска: http://i36.tinypic.com/e8ptl3.png http://i36.tinypic.com/e8ptl3.png

http://i36.tinypic.com/e8ptl3.png Надеюсь, вы можете помочь мне, я потерян ..

Answer 1

Взгляните на http://www.w3schools.com/css/css_positioning.asp

1. Вашему абсолютно позиционированному элементу нужен родитель (или предок) с позицией position: родственник; знать, где находиться. Поскольку вы его не поместили, браузерам сложно определить, куда поместить элемент, и каждый делает это по-своему.
2. После того, как вы установили «position: относительный;», вы можете установить верхний или нижний, левый или правый для абсолютно позиционированного элемента, чтобы сместить его.

Надеюсь, это поможет.