Как мне сделать выпадающее меню CSS с моим CSS?

Question

Как мне сделать выпадающее меню CSS с моим CSS?

0

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

Вот мой код:

<!-- Navigation Bar -->

<div class="navbar">
    <div class="button_l"><a href="Main_Page.html"> Home </a></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button_r"><a href="#"> Yeah </a></div>
</div>

Вот CSS, который идет с ним:

.navbar {
width: 90%;
height: 30px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
line-height: 25px;
position: absolute;
border: 2px solid;
border-radius: 250px;
background: url("../images/navbar.png") repeat-x;
margin-left: 50px;
}

.button a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button_l a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button_r a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
background: url("../images/navbar_roll.png") repeat-x;
}

.button_l a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
background: url("../images/navbar_roll.png") repeat-x;
}

.button_r a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
background: url("../images/navbar_roll.png") repeat-x;
}

Я использую button_l для левой кнопки, кнопки для средних трех кнопок и button_r для правой кнопки. Я бы предпочел, чтобы кнопка "Сбой" могла иметь выпадающее меню, возможно, две или три страницы. Как я могу это сделать без создания тегов ul и li?

благодаря

Кроме того, нет javascript, пожалуйста. Просто простой и чистый HTML и CSS.

user3324265 18 фев. 2014, в 17:47

Источник

0

Где находится предполагаемое подменю ... Я не вижу его в вашем HTML. jsfiddle.net/ryJT4
Paulie_D 18 фев. 2014, в 16:18

Теги:

html

css

css3

drop-down-menu

menu

3 ответа

Ещё вопросы

Где находится предполагаемое подменю ... Я не вижу его в вашем HTML. jsfiddle.net/ryJT4

swider · Answer 1 · 2014-02-18T16-18-00.000Z

Семантически было бы лучше использовать nav а не div с неупорядоченным списком для каждого элемента. Затем вы можете использовать поворот li чтобы легко переключать отображение вашего subnav. Что-то вроде:

наценка

<nav>
    <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li>
            <a href="#">Three</a>
            <ul>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
            </ul>
        </li>
    </ul>
</nav>

Стили

li {
    float: left;
    position: relative;
    margin-right: 20px;
}
ul ul {
    display: none;
    position: absolute;
    bottom: 1em;
}
ul li:hover ul {
    display: block;
}

Manik Arora · Answer 2 · 2014-02-18T16-13-00.000Z

Вы можете найти отзывчивый, двухуровневый чистый HTML/CSS раскрывающийся список здесь:

http://codepen.io/manik314/pen/BaqrI

James King · Answer 3 · 2014-02-18T14-58-00.000Z

Вы могли бы сделать так

<div class="navbar">
    <div class="button button_l"><a href="Main_Page.html"> Home </a><div class="sub-menu">Menu here</div></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button button_r"><a href="#"> Yeah </a></div>
</div>

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

.button {
    position:relative; 
}
.sub-menu {
    position:absolute;
    top:100%;
    left:-10000px;
}
.button:hover .sub-menu {
    left:0;
}

Должен выглядеть так: http://jsfiddle.net/ryJT4/1/

Это работает, но позволяет мне сделать только один выпадающий список ... Как бы я сделал более одного, скажем, два или три? Спасибо