@svilkov87

Как из вертикального меню сделать горизонтальное?

привет всем!
взгляните на мой код. как из этого вертикального меню сделать горизонтальное?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="side">
     <ul class="menu">
         <li class="menu_list"><a href="#">punkt1</a>
         <ul class="menu_drop">
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt2</a></li>
         <li class="menu_list"><a href="#">punkt3</a>
         <ul class="menu_drop">
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt4</a></li>
         <li class="menu_list"><a href="#">punkt5</a>
         <ul class="menu_drop">
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
     </ul>
  </div>
    
</body>
</html>
<code lang="css">
body{
    margin: 0;
    padding: 0;
    font: 1em/1.4em sans-serif;
}


.side{
    width: 200px;
    margin: 30px;
}

a{text-decoration: none;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }


/*внешний вид меню*/

.menu a{
    background: #3d3d3d;
    color: #fff;
    padding: 10px;
    display: block;
    width: 200px;
    border-bottom: 1px solid #7d7d7d;
    transition: 0.4s all;
    
}

.menu a:hover{
    background: #FF009D;
    color: #fff ;
    padding: 10px 0 20px 20px;   
}

/*всплывающее меню*/

.menu_list{
    position: relative;
}

.menu_drop{
    position: absolute;
    width: 100%;
    left: 110%;
    opacity: 0;
    top: 0;
}

.menu_list:hover .menu_drop{
    opacity: 1;
}
</code>
  • Вопрос задан
  • 2480 просмотров
Решения вопроса 2
@hime2
А если честно 2-3 минуты верски.
jsfiddle.net/z85t976k/1
Ответ написан
Therapyx
@Therapyx
Data Science
Ну ответ уже дали, так что вот на тебе хорошие и очень красивые примеры.
cssmenumaker.com/blog/10-free-html-drop-down-menu-...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы