Добавление подменю в горизонтальное меню - PullRequest
Новая
       43

Добавление подменю в горизонтальное меню

0 голосов
/ 26 марта 2012

Я использую горизонтальное меню cssmenumaker.com, в котором есть подпункты.Я пытался, но мне просто не удалось добавить subub-items.

Это CSS, который я использую: 

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}

#menu {
position:absolute;
left:250px;
top:0px;
width:750px;
height:35px;
border:0px solid #123456;
}

.menu ul{
background:#000000;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
    float:left;
    padding:0px;
    }

.menu li a{
    background:#000000 url("images/seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover,
    .menu ul li:hover a{
        background: #2580a2 url("images/hover.gif") bottom center no-repeat;
        color:#FFFFFF;
        text-decoration:none;
        }
.menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:125px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
.menu li:hover ul{
    display:block;

    }
.menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:125px;
    }
.menu li:hover li a{
    background:none;

    }
.menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover,
    .menu li ul li:hover a{
        background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
        border:0px;

        color:#ffffff;
        text-decoration:none;
        }
.menu p{
    clear:left;
    }

Я уже добавил подменю в HTML (что, я считаю, сделано правильно): 

<div id="menu" class="menu">
<ul>
    <li><a href="#" >item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a>
        <ul>
            <li><a href="#">subitem1</a></li>
            <li><a href="#">subitem2</a></li>
            <li><a href="#">subitem3</a>
                <ul>
                    <li><a href="#">subsubitem1</a></li>
                    <li><a href="#">subsubitem2</a></li>
                </ul>
            </li>
            <li><a href="#">subitem4</a></li>
            <li><a href="#">subitem5</a></li>

        </ul>
    </li>
    <li><a href="#">item4</a></li>
    <li><a href="#">item5</a></li>
</ul>

Вот текущая ситуация: http://bit.ly/GRJkT5 Как видите, субпункты 1 и 2 отображаются в верхней части подпунктов 4 и 5. Как мне отредактировать CSS?

Заранее спасибо!Франк.

Ответы [ 3 ]

0 голосов
/ 26 марта 2012

Ваше подменю третьего уровня на самом деле не позиционируется абсолютно, поэтому оно просто появляется над подменю второго уровня. Правильно расположите его относительно вашего подменю, используйте дочерний селектор, чтобы отобразить подменю второго уровня, как предложил Колинк, и оно должно работать следующим образом:

CSS 

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

.menu li {
    position:relative;
}

.menu ul ul ul {
    position:absolute;
    left:100%;
    top:0;
}
0 голосов
/ 29 марта 2012

Хорошо, маленькие детские шаги здесь. Я добавил кодирование для подменю (я сгущу код позже): 

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}

#menu {
position:absolute;
left:250px;
top:0px;
width:750px;
height:35px;
border:0px solid #123456;
}

.menu ul{
background:#000000;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li{
float:left;
padding:0px;
}

.menu li a{
background:#000000 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}

/* --- START SUBMENU -------------------------------------------------------------- */

.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:0px;*/
/*left:0px;*/
}

.menu li:hover ul{
display:block;
}

.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.menu li:hover li a{
background:none;
}

.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}

 .menu p{
clear:left;
}   

/* --- START SUBSUBMENU -------------------------------------------------------------- */

.menu li ul li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:0px;*/
/*left:0px;*/
}

.menu lu ul li:hover ul{
display:block;
}

.menu li li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.menu li:hover li li a{
background:none;
}

.menu li ul li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul li ul a:hover, .menu li ul li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}

Результат здесь: http://bit.ly/Hl9SwM Подменю (2.4.1 и т. Д.) Отображаются непосредственно при наведении курсора на меню 2, и их местоположение не является правильным (должно быть справа от подменю 2.4). Как я могу это изменить?

Спасибо!

0 голосов
/ 26 марта 2012

Вам следует рассмотреть возможность использования комбинатора >.

Пример: 

/* instead of... */
.menu li:hover ul{
    display:block;
}
/* use... */
.menu li:hover > ul{
    display:block;
}

Это гарантирует, что стиль будет влиять только на прямых потомков элемента hovered.

Используйте этот комбинатор в нужных местах, и ваша проблема должна быть решена.

...