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

Question

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

.header {
  width: 100%;
  height: 80px;
  display: block;
  text-align: left;
  color: #2d3a49;
  background: #f5f5f5;
}

.inner_header {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
}

.logo_container h1 {
  color: #2d3a49;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  font-family: 'Open Sans';
  font-size: 40px;
  font-weight: 200;
}

.logo_container h1 span {
  font-weight: 800;
}

.navigation {
  float: right;
  height: 100%;
}

.navigation li {
  height: 100%;
  display: table;
  float: left;
  padding: 0px 20px;
}

.navigation li a {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  font-family: 'Open Sans';
  font-size: 20px;
}

<div class="header">
  <div class="inner_header">
    <div class="logo_container">
      <h1>Wise <span>Software</span></h1>
    </div>

    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <ul>
        <li><a href="#">Food</a></li>
        <li><a href="#">Recipes</a></li>
      </ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Price</a></li>
    </ul>
  </div>
</div>

Answer 1

Может быть, что-то вроде сопровождающего фрагмента может быть полезным. Вам нужно создать div для размещения выпадающего содержимого, в дополнение к кнопке, которая будет вызывать раскрывающееся меню при наведении курсора. Не стесняйтесь стилизовать соответственно.

.header {
    width: 100%;
    height: 80px;
    display: block;
    text-align: left;
    color: #2d3a49;
    background: #f5f5f5;
    }

.inner_header{
   width: 70%;
   height: 100%;
   display: block;
   margin: 0 auto;
   }

.logo_container{
   height: 100%;
   display: table;
   float: left;
   }

.logo_container h1{
   color: #2d3a49;
   height: 100%;
   display: table-cell;
   vertical-align: middle;
   font-family: 'Open Sans';
   font-size: 40px;
   font-weight: 200;
   }

.logo_container h1 span{
   font-weight: 800;
   }

.navigation{
   float: right;
   height: 100%;
   }

   
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown {
  float: right;
  overflow: hidden;
  margin-right:50px;
  background-color: black;
  margin-top: 20px;
  border-radius: 25px;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

<div class="header">
<div class="inner_header">
  <div class="logo_container">
    <h1>Wise <span>Software</span></h1>
  </div>

  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Home</a>
      <a href="#">Blog</a>
      <a href="#">Food</a>
      <a href="#">Recipes</a>
      <a href="#">Contact</a>
      <a href="#">Price</a>
    </div>
  </div>
</div>

Answer 2

То, как вы кодировали разметку, я предполагаю, что вы хотели, чтобы ссылка на Блоги имела выпадающий список. Если так, это должно работать. https://codepen.io/richiegarcia/pen/ExVXgOW

<div class="header">
    <div class="inner_header">
        <div class="logo_container">
            <h1>Wise
                <span>Software</span>
            </h1>
        </div>
        <ul class="navigation">
            <li><a href="#">Home</a>
            </li>
            <li>
                <a href="#">Blog</a>
                <ul>
                    <li><a href="#">Food</a>
                    </li>
                    <li><a href="#">Recipes</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a>
            </li>
            <li><a href="#">Price</a>
            </li>
        </ul>
    </div>


.header {
    width: 100%;
    height: 80px;
    display: block;
    text-align: left;
    color: #2d3a49;
    background: #f5f5f5;
    }

.inner_header{
   height: 100%;
   display: block;
   margin: 0 auto;
   }

.logo_container{
   height: 100%;
   display: table;
   float: left;
   }

.logo_container h1{
   color: #2d3a49;
   height: 100%;
   display: table-cell;
   vertical-align: middle;
   font-family: 'Open Sans';
   font-size: 40px;
   font-weight: 200;
   }

.logo_container h1 span{
   font-weight: 800;
   }
.menu-icon {
  display: block;
}
.navigation{
    float: right;
    display: inline-block;
    height: 100%;
}

.navigation li{
   position: relative;
   display: inline-block;
   padding: 0px 20px;
   list-style-type: none;
   }

 .navigation li a{
   vertical-align: middle;
   height: 100%;
   font-family: 'Open Sans';
   font-size: 20px;
   }
.navigation ul {
  display: none;
  position: absolute;
  left: 0;
  z-index: 1;
  padding: 0;
  margin: 15px 0 15px;
}
.navigation ul li{
    margin: 0 0 15px;
}
.navigation > li:hover ul {
  display: block;
}