Аккордеон-раздвижное меню, не правильно раздвигается

@Кирилл255 · Регистрация: 20.01.2017

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Скажу сразу, я новичок, только начал изучать html/css. Суть проблемы: подменю(субменю) уезжает в сторону при открытии аккордеона, вот примерно так аккордеон должен выглядеть закрытым:

Аккордеон-раздвижное меню, не правильно раздвигается

дальше вот что происходит при открытии:

вот так:

и так:

в идеале должно быть примерно так как на следующем рисунке:

Суть идеи сделать алфавитный список-справочник(не знаю как правильно называется), есть список букв,при нажатии на любую из них, открывается список слов(начинающихся на данную букву), дальше выбираем любое нужное слово, нажимаем, и открывается(ещё ниже) описание или хар-ка(в общем что угодно).
Знаю,что можно решить с помощью jQuery, но я пока не изучал эту технологию и сам js, только бегло просмотрел, пока искал как сделать аккордеон...
вот мой html-код (код не с полным списком букв)

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="accordion-html5" class="accordion">
 
        <details>
            <summary><h2>А</h2></summary>
        
            <div id="accordion-html5" class="accordion">
                <details>
                    <summary><h3>Абрикос</h3></summary>
                    <p>Абрикос-это очень вкусно...</p>
                  </details>
            </div>
            <div id="accordion-html5" class="accordion">
                <details>
                    <summary><h3>Ананас</h3></summary>
                     <p>Ананас-это очень вкусно...</p>
                </details>
            </div>
 
        </details>
 
         <details>
            <summary><h2>Б</h2></summary>
        
            <div id="accordion-html5" class="accordion">
                <details>
                    <summary><h3>Банан</h3></summary>
                    <p>Банан-это очень вкусно...</p>
                  </details>
            </div>
            <div id="accordion-html5" class="accordion">
                <details>
                    <summary><h3>Брусника</h3></summary>
                     <p>Брусника-это очень вкусно...</p>
                </details>
            </div>
 
        </details>
 
        <details>
            <summary><h2>В</h2></summary>
        
            <div id="accordion-html5" class="accordion">
                <details>
                    <summary><h3>Виноград</h3></summary>
                    <p>Виноград-это очень вкусно...</p>
                  </details>
            </div>
            <div id="accordion-html5" class="accordion">
                <details>
                    <summary><h3>Вишня</h3></summary>
                     <p>Вишня-это очень вкусно...</p>
                </details>
            </div>
 
        </details>
      
    </div>
    
</body>
</html>

вот css:

CSS

h2 {
    color: #002850; 
    font-size: 30px; 
    font-weight: normal;
    padding: 45px 0 15px;
    cursor:pointer;
}
 
h3 {
    color: #002850; 
    font-size: 30px; 
    font-weight: normal;
    padding: 45px 0 15px;
    cursor:pointer;
}
 
.accordion {
    float: left; 
    position: relative;
}
 
.accordion a {
    display: block; 
    text-decoration: underline;
}
 
.accordion h2, .accordion a {
    color: #005cb8; 
    font: 14px/30px 'Verdana', sans-serif;
    height: 30px; 
    margin: 0; 
    padding: 0; 
    text-decoration: underline;
}
 
.accordion h3 {
    color: #ff0000; 
    font: 14px/30px 'Verdana', sans-serif;
    height: 30px; 
    margin: 0; 
    padding: 0; 
    text-indent: 10px;
    text-decoration: underline;
}
 
p {
    color: #000; 
    font: 12px/18px 'Verdana', sans-serif;
    padding: 20px 10px;
    text-indent: 20px;
}
 
#accordion-html5 {
    clear: both; 
    margin-top: 20px;
}
 
details summary::-webkit-details-marker{        /* убираем маркер */
    display: none;
}
 
details summary:focus {    /* убираем рамку при наведении курсора */
outline: none;
}

Может кто помочь с этим?

Комментарий модератора

Запрещено размещать задания и решения в виде картинок и других файлов с их текстом.

@Janosense · 20.01.2017, 21:41

Кирилл255, обратите внимание на свойство float: left у класса .accordion

@Кирилл255 · 21.01.2017, 02:08 **[ТС]**

Janosense, спасибо, убрал float и всё стало как надо

@Janosense 45 / 41 / 22 Регистрация: 28.01.2015 Сообщений: 162
	20.01.2017, 21:41	2
	Кирилл255, обратите внимание на свойство float: left у класса .accordion 1

@Кирилл255 2 / 1 / 1 Регистрация: 20.01.2017 Сообщений: 43
	21.01.2017, 02:08 [ТС]	3
	Janosense, спасибо, убрал float и всё стало как надо 0