Неупорядоченный список Подменю Горизонтальное

Question

Я пытаюсь сделать подменю неупорядоченного списка горизонтальным. Я попытался кучу вещей, в том числе:

поплавка: левый дисплей: встроенный

Они, кажется, были рекомендованы в других местах с людьми, которые сталкиваются с аналогичными проблемами. Тем не менее, я просто не могу заставить мое подменю быть горизонтальным, когда «кнопка подменю» зависнет.

Как вы можете это сказать, это создание основного меню навигации на веб-сайте.

Мой HTML-код здесь:

<ul id="menu" > 
    <li><a href="#">Home</a></li> 
    <li class="sub"> 
    <a href="#">Sub Menu Button</a> 
    <ul> 
    <li><a href="#">Button 1</a></li> 
    <li><a href="#">Button 2</a></li> 
    <li><a href="#">Button 3</a></li> 
    <li><a href="#">Button 4</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Button 5</a></li> 
    <li><a href="#">Button 6</a></li> 
    <li><a href="#">Button 7</a></li> 
    </ul> 

Мой CSS код здесь:

#menu { 
    margin: 0; 
    padding: 0.15%; 
    background: #201f5f; 
    height: 3em; 
    list-style: none; 
    font-family:arial; 
    } 

    #menu > li { 
    height: 100%; 
    margin-right: 0.5em; 
    padding: 0 1em; 
    background:#201f5f; 
    } 

    #menu > li > a { 
    height: 3em; 
    color: #ffffff; 
    text-decoration: none; 
    line-height: 3; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 

    #menu > li > a:hover { 
    color: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub { 
    position: relative; 
    } 

    #menu > li.sub ul { 
    margin: 0; 
    padding: 0.5em 0; 
    list-style: none; 
    background: #000000; 
    position: absolute; 
    top: -1000em; 
    } 

    #menu > li.sub ul li { 
    width: 90%; 
    margin: 0 auto 0.3em auto; 
    } 

    #menu > li.sub ul li a { 
    height: 100%; 
    display: inline; 
    float: left; 
    padding: 0.4em; 
    color: #fff; 
    font-weight: bold; 
    text-decoration: none; 
    } 

    #menu > li.sub ul li a:hover { 
    background: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub:hover ul { 
    top: 3em; 
    } 

    #menu{ 
    text-align:center; 
    } 

    li{ 
    display:inline-block; 
    } 

Я КРАЙНЕ новичок как HTML и CSS, поэтому я прошу прощения, если код является беспорядок, однако он работает так же, как я сказал, я хочу, чтобы подменю было горизонтальным, а не вертикальным.

Любая помощь будет принята с благодарностью.

Answer 1

Update ваш CSS, чтобы быть, как это с фиксированной шириной, чтобы лучше контролировать макет:

Посмотреть казнено здесь: http://jsfiddle.net/ShADm/6/

#menu { 
    margin: 0; 
    padding: 0.15%; 
    background: #201f5f; 
    height: 3em; 
    list-style: none; 
    font-family:arial; 
    width: 800px; 
    } 

    #menu > li { 
    height: 100%; 
    margin-right: 0.5em; 
    padding: 0 1em; 
    background:#201f5f; 
    } 

    #menu > li > a { 
    height: 3em; 
    color: #ffffff; 
    text-decoration: none; 
    line-height: 3; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 

    #menu > li > a:hover { 
    color: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub { 
    position: relative; 
    } 

    #menu > li.sub ul { 
    margin: 0; 
    padding: 0.5em 0; 
    list-style: none; 
    background: #000000; 
    position: absolute; 
    top: -1000em; 
    left: -160px; 
    width: 803px; 
    } 


    #menu li.sub ul li a { 
    height: 100%; 
    display: inline; 
    float: left; 
    padding: 0.4em; 
    color: #fff; 
    font-weight: bold; 
    text-decoration: none; 
    } 

    #menu > li.sub ul li a:hover { 
    background: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub:hover ul { 
    top: 3em; 
    } 

    #menu{ 
    text-align:center; 
    } 

    li{ 
    display:inline-block; 
    } 

Вот аффект: http://jsfiddle.net/ShADm/6/

Answer 2

#menu li>ul{ 

position:absolute; 
visibility:hidden; 
} 

#menu li:hover>ul{ 

position:relative; 
visibility:visible; 
} 

Вам нужно выйти в <ul>, вложенный в <li>, чтобы этот внутренний список вышел в сторону. Вы больше пытаетесь повлиять на результат <ul>, а не на элементы списка.

Недавно я сделал меню, которое потенциально может иметь бесконечно вложенные списки категорий, и я построил меню в основном так:

<ul class="menu"> 
<ul id="menu"> 
    <li class="menu_side"><a href="" name="categories">Categories</a> 
     <ul> 
      <li class="menu_down"><a href="" name="new">New</a> 
       <ul> 
        <li><a href="" name="abc">Abc</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
</ul> 

Путь я поставил его в том, что если категория в пределах любого родителя является массив категорий, он будет перемещаться в сторону, иначе он будет двигаться вниз. Это встроено в код, который я использую для создания списка в моем меню. Как я уже сказал, он может иметь бесконечно вложенные списки в списках категорий, как дерево каталогов. Я бросил более 5 тыс. Готовых категорий в этой системе, и это не сработало, когда я его убрал.

ul#menu li ul{ 

    visibility:hidden; 
    position:absolute; 
    opacity:0; 
    box-shadow:0px 0px 2px #000; 
    background-color:#004080; 
    padding:0; 
    } 

ul#menu .menu_side ul{ 

    visibility:hidden; 
    opacity:0; 
    position:absolute; 
    left:0%; 
    top:-25px; 
    } 
ul#menu .menu_side:hover>ul{ 

    visibility:visible; 
    opacity:1; 
    position:relative; 
    left:100%; 
    top:-25px; 
    z-index:1; 
    } 

ul#menu .menu_down ul{ 

    visibility:hidden; 
    opacity:0; 
    position:absolute; 
    top:0%; 

    } 


ul#menu .menu_down:hover>ul{ 

    visibility:visible; 
    opacity:1; 
    position:relative; 
    z-index:1; 
    background-color:#6666ff; 
    } 
ul#menu .menu_side:hover{ 
    height:25px; 
} 

Это может быть не самый эффективный способ сделать это, но он выполняет эту работу для меня.