CSS / HTML: не <br>для каждого <ul>

Question

Так что у меня небольшая проблема с тем, чтобы мое меню с функцией слайдера работало вместе с другим моим существующим меню (обычные ссылки).

Мое существующее меню (с обычными ссылками) выглядит как простой UL со ссылками LI.

<ul class="menu">
      <li><a href="home.php">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
</ul>

И мое меню слайд-шоу выглядит так:

    <img src="images/button.png" width="126" height="23" class="menu_class">
<ul class="the_menu">
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
</ul>

Я хочу ul с меню слайд-шоу NEXT к другому ul с обычными ссылками ..

Прямо сейчас, что он делает, это <br> для каждого ul, поэтому меню с ползунком находится под меню, но я хочу, чтобы оно было рядом с

.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 {
font-size: 12px;
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #fffc30;
}

/* MENU 2*/

.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;
}

Answer 1

Не видя чего-либо, мое первое предложение будет заключаться в том, чтобы плавать UL, а не располагать их абсолютно.

В то же время, я бы предложил не иметь совсем другой UL для опции меню с подменю. Существуют более чистые способы сделать это с одним UL верхнего уровня и отдельными UL только для подменю. В этих случаях вы вкладываете UL подменю в элементы LI для основного UL. Вот один ресурс , но есть много других. Эта ссылка должна дать вам достаточно для начала.

Josh

РЕДАКТИРОВАНИЕ: Подробнее / пример

По сути, ваша структура UL будет выглядеть следующим образом:

<div id="menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a class="drop" href="/Products/Index">Products</a>
            <ul class="submenu">
                <li><a href="/Products/1">Meat cleavers</a></li>
                <li><a href="/Products/2">Hockey masks</a></li>
                <li><a href="/Products/3">Chainsaws</a></li>
            </ul>
        </li>
    </ul>
</div>

Волшебство происходит в CSS. Мне нужно значительно упростить его, потому что моя реализация включает в себя специальные эффекты при наведении, стили для элементов LI заголовков не связанных групп в выпадающем меню и цветовые классы для отдельных элементов меню. Основная идея заключается в том, что вы структурируете UL так, как вы хотите, а затем стилизуете теги привязки, чтобы создать желаемый вид.

Ниже приведен мой точный CSS (который, кстати, щедро заимствует из структуры меню Zendesk ). Я удалил шум, связанный с некоторыми из моих специальных стилей, но если я случайно вытащил что-то, что сломало бы это, дайте мне знать, и я опубликую все это.

#menu { height: 30px; }

#menu ul { 
    list-style: none; 
    float: left;
    margin: 0; 
    padding: 0;
}

#menu ul a { 
    text-decoration: none;
    font-size: 12px; 
}

#menu ul li { 
    float: left; 
    position: relative; 
    padding: 8px 0; 
}
#menu li:hover { background: transparent url(/content/images/sprite.png) repeat-x 0px -128px; }
#menu a.drop { 
    padding: 8px 15px 7px 15px; 
    color: White;
}

#menu ul li img { 
    vertical-align: top; 
    padding-right: 5px; 
    border: 0; 
}

#menu li:hover > ul, #menu li.over ul { display: block; }

/* Drop-down menus */
ul.submenu li:hover > ul { display: block; }
ul.submenu li { width: 200px; left:0pt; height:auto;}
ul.submenu { 
    display: none;  
    left: -2px; 
    margin: 5px 0 0 0; 
    background:#FFFFFF none repeat scroll 0% !important;
    border-style:none solid solid;
    border-width:0pt 2px 2px;
    border-color: #4F81BD;
    padding:8px !important;
    position: absolute;
    text-align:left;
    top:30px;
    width: 200px;
    z-index:15000;
    min-height:28px;
    padding-left:8px;
    float:left;
}

ul.submenu li a {
color:#505050 !important;
border-top:1px solid #DDDDDD;
display:block;
float:none;
padding:3px 5px;
}

#menu li ul li {padding: 0; }

ul.submenu li a:hover {
background:#E6F3FC none repeat scroll 0% !important;
color:#000000;
}