Как сделать меню CSS из необработанного HTML-кода

У меня есть код HTML-кода, я начал создавать CSS для меню, но я остановился, так как не уверен, куда идти дальшеКак сделать меню CSS из необработанного HTML-кода

Я добавил этот CSS до сих пор:

#menu-my-integra, ul.sub-menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#menu-my-integra li { 
    display: inline; 
    margin-right:10px; 
} 
ul.sub-menu { 
    display:none; 
} 
#menu-my-integra li:hover ul.sub-menu { 
    display: block; 
    max-height: 200px; 
}

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

Я created a fiddle здесь:

источник

2015-11-10 charlie

На этом есть много учебников, вот один из них: http://code-tricks.com/simple-css-drop-down-menu/ –

Спасибо за это, я использовал этот CSS (http://jsfiddle.net/odzqj7r5/3/), который хорошо работает. однако я не могу разобраться, как я могу сделать подменю одинаковой ширины, и каждая ссылка в подменю имеет ту же ширину. – charlie

Я написал серию книг под названием «Функциональный CSS» и последний случай первых обложек томов (в большие подробности), как создать многоуровневое выпадающее меню. Это классный случай, который также использует запросы flexbox и media. Приветствия. – DRD

Я сделал свою работу, реализовав бокс-проклейки: атрибут границы окна:

/*Initialize*/ 
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu { 
    padding:0; 
    margin: 0; 
} 
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li { 
    list-style-type: none; 
    display:inline-block; 
    width:20%; 
    background: #666; 
    text-align:center; 
} 
/*Link Appearance*/ 
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a { 
    display: inline-block; 
    text-decoration: none; 
    color: #fff; 
    padding: 8px; 
    display:inline-block; 
    margin:0; 
    box-sizing:border-box; 
} 
/*Make the parent of sub-menu relative*/ 
ul#menu-my-integra li { 
    position: relative; 
} 
/*sub menu*/ 
ul#menu-my-integra li ul.sub-menu { 
    display:none; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100px; 
} 
ul#menu-my-integra li:hover ul.sub-menu { 
    display:block; 
}

Примечание: вам придется регулировать ширину «LI»% элементов в зависимости от того, сколько их есть. Надеюсь, это поможет!

источник

2015-11-10 19:29:50 dmcknight

Как сделать меню CSS из необработанного HTML-кода

ответ

Смежные вопросы