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

Question

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

0

Я пытаюсь сделать горизонтальное меню css. проблема в том, что мое подменю не будет плавать..

Что я сделал не так?

Мой HTML:

<ul class="nav">

    <li class="button"><a href="#"><span>Je Studie</span></a> 
        <ul>

            <li><a href='#'>Programma</a></li>
            <li><a href='#'>Begeleiding</a></li>
            <li><a href='#'>Locaties</a></li>
            <li><a href='#'>Open dag</a></li>
            <li><a href='#'>Toelatingseisen</a></li>
            <li><a href='#'>Kosten</a></li>
            <li><a href='#'>Aanmelden</a></li>
            <li><a href='#'>Nieuws</a></li>
        </ul>
    </li>
    <li class="button"><a href = '#'><span>Voor ouders</span></a></li>

    <li class="button"><a href = '#'><span>Voor decanen</span></a></li>

    <li class="button"><a href = '#'><span>Voor bedrijven</span></a></li>

    <li class="button"><a href = '#'><span>Contact</span></a></li>
</ul>

И мой CSS выглядит так:

.nav{position:relative;}
.nav a{display:block; color:black;}


.nav li{
    float:left;
    margin:0;

    position:relative;

}
.nav ul{visibility:hidden; position:absolute; top:100%; left:0;}
.nav li:hover>ul{visibility:visible; }

благодарю!

FFBbodie 22 окт. 2013, в 21:56

Источник

1

В качестве рекомендации я бы использовал display:none; и display:block; вместо visibility , но, похоже, у меня все хорошо. Я думаю, я не понимаю проблему.
usernolongerregistered 22 окт. 2013, в 19:44
0

Да, здесь все выглядит хорошо, возможно, объясняя, что вы подразумеваете под «не будет всплывать», и, возможно, в каких браузерах вы обнаружите проблемы, это поможет сузить проблему!
Matt Maclennan 22 окт. 2013, в 19:46

Теги:

html

css

2 ответа

0

<nav id="navbar"> <li> <ul> <li><a href='#'>Programma</a></li> <li><a href='#'>Begeleiding</a></li> <li><a href='#'>Locaties</a></li> <li><a href='#'>Open dag</a></li> <li><a href='#'>Toelatingseisen</a></li> <li><a href='#'>Kosten</a></li> <li><a href='#'>Aanmelden</a></li> <li><a href='#'>Nieuws</a></li> </ul> </li> </nav>

user3800453 03 июль 2014, в 06:31

0

CSS #navbar li {display: inline-block;}
Jason01001010000010 03 июль 2014, в 08:50
0

извините, я не знаю правильный способ размещения ответов на этом сайте :-P
Jason01001010000010 03 июль 2014, в 08:52

Ещё вопросы

В качестве рекомендации я бы использовал display:none; и display:block; вместо visibility , но, похоже, у меня все хорошо. Я думаю, я не понимаю проблему.
Да, здесь все выглядит хорошо, возможно, объясняя, что вы подразумеваете под «не будет всплывать», и, возможно, в каких браузерах вы обнаружите проблемы, это поможет сузить проблему!
извините, я не знаю правильный способ размещения ответов на этом сайте :-P

David · Accepted Answer · 2013-10-22T17-15-00.000Z

Это рабочий пример

HTML

<ul class="nav">

    <li class="button"><a href="#"><span>Je Studie</span></a> 
        <ul>

            <li><a href='#'>Programma</a></li>
            <li><a href='#'>Begeleiding</a></li>
            <li><a href='#'>Locaties</a></li>
            <li><a href='#'>Open dag</a></li>
            <li><a href='#'>Toelatingseisen</a></li>
            <li><a href='#'>Kosten</a></li>
            <li><a href='#'>Aanmelden</a></li>
            <li><a href='#'>Nieuws</a></li>
        </ul>
    </li>
    <li class="button"><a href = '#'><span>Voor ouders</span></a></li>

    <li class="button"><a href = '#'><span>Voor decanen</span></a></li>

    <li class="button"><a href = '#'><span>Voor bedrijven</span></a></li>

    <li class="button"><a href = '#'><span>Contact</span></a></li>
</ul>

Css

.nav a{display:block; color:black;}
.nav li{
    float:left;
    margin:0;
    list-style: none;
    position:relative;
    margin-right: 20px;

}
.nav ul{ position:absolute; top:100%; left:0;width: 300px;display: none;}
.nav ul li{float: left;width: 100px;}
.nav li:hover>ul{ display: block;}