Как отобразить переполнение белого фона в выпадающем меню? - PullRequest
Новая
       35

Как отобразить переполнение белого фона в выпадающем меню?

0 голосов
/ 09 января 2012

У меня есть выпадающее меню, созданное исключительно с помощью CSS. Я хотел бы реализовать переполнение, используя z-index (я полагаю), которое будет обливаться границей в моем меню, чтобы создать впечатление, что и ссылка, и раскрывающееся меню объединены.

Раскрывающийся список работает правильно, но мне нужно, чтобы первый пункт меню был переполнен белым фоном в раскрывающемся меню.

Если вы перейдете на http://cssdesk.com/ztK64 и наведете курсор на первую ссылку меню, вы увидите, что я пытаюсь объяснить.

Это мой код:

CSS 

    /*Main nav*/
.main_nav_container{
    margin: 10px 0 10px 0;
    float:right;
}
ul.main_nav{
    margin:0;
    z-index:1;
    postion:absolute;
}
ul.main_nav li{
    margin:0;
    display:inline-block;
    border-top:solid 1px transparent;
    border-left:solid 1px transparent;
    border-right:solid 1px transparent;
}
ul.main_nav li a{  
    font-size:13px;
    display:block;
    font-weight:bold;
    height:25px;
    line-height:25px;
    padding:0 13px;
    text-decoration:none;
    color:#1122cc;
    border:1px solid transparent;
}
ul.main_nav li a:hover{
  text-decoration:underline;
}
ul.main_nav li:hover{
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc;
    border-right:solid 1px #ccc;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius:  4px 4px 0 0;
    -khtml-border-radius: 4px 4px 0 0;
    background: #fff;
} 
ul.main_nav li:hover ul{
    display:inline;
}
ul.main_nav li ul{
    display:none;
    z-index:500;
    position:absolute;
    background: #fff;
    margin:0;
    padding:0;
    border:solid 1px #ccc;
    -moz-border-radius: 0 4px 4px 4px;
    border-radius: 0 4px 4px 4px;
    -webkit-border-radius:  0 4px 4px 4px;
    -khtml-border-radius:  0 4px 4px 4px;
}
ul.main_nav li ul li{
    display:block;
    margin:0;
    padding:0;
    text-align:left;
}
ul.main_nav li ul li:hover{
    text-decoration:underline;
    border-top:solid 1px #fff;
    border-left:solid 1px #fff;
    border-right:solid 1px #fff;
}
ul.main_nav li ul li a{
    font-weight:normal;
}

HTML 

<div class="main_nav_container">
                <ul class="main_nav">
                <li>
                <a id="hover" href="#">For sale</a>
                    <ul>
                        <li><a href="#">Property for sale</a></li>
                        <li><a href="#">New homes for sale</a></li>
                        <li><a href="#">Find estate agents</a></li>
                    </ul>
                </li>


                <li><a href="#">To rent</a></li>
                <li><a href="#">New homes</a></li>
                <li><a href="#">House prices</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Property advice</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </div>

1 Ответ

3 голосов
/ 09 января 2012

Добавьте следующий CSS: 

ul.main_nav li:hover a {
 border-bottom:1px solid white;
 position:relative;
 z-index:100;
}
ul.main_nav li:hover ul {
 margin-top:-1px;
 margin-left:-1px;
 z-index:99;
}

Вы должны иметь position:relative; в a, чтобы z-index работал правильно.Нижняя граница a закрывает границу ul.Изменения полей в ul предназначены для правильного расположения границ для эффекта их соединения.

...