ドロップダウンメニューの追加方法は？

Question

私は水平メニューバーを持っていますが、項目の1つにサブメニューを追加しようとしましたが、追加できません。メインメニューに追加すると、誰かが助けてくれませんか？ ありがとう HTML

<div id="talltabs-maroon"> 
 
\t <ul> 
 
\t \t <li class="first"><a href="#">Home <span>Page</span></a></li> 
 
\t \t <li class="active"><a href="#"><span>About us</span></a></li> 
 
\t \t <li class="dropdown"><a class="dropbtn" href="#"> <span> Report \t \t \t \t </span></a> 
 
     <ul class="dropdown-content" style="left:0"> 
 
      <li> 
 
       <a href=""> 
 
       <p>Valve Report</p> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href=""> 
 
       <p>Cylinder Report</p> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
\t \t <li class="last"><a href="#">Contact <span>Us</span></a></li> 
 
\t </ul> 
 
</div>

メインメニューのCSS

#talltabs-maroon { 
 
    clear: left; 
 
    float: left; 
 
    padding: 0; 
 
    border-top: 3px solid #CD324F; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    font-family: Georgia, serif; 
 
    height: 90px; 
 
    position: inherit; 
 
} 
 

 
    #talltabs-maroon ul { 
 
     float: left; 
 
     margin: 0; 
 
     padding: 0; 
 
     list-style: none; 
 
     position: relative; 
 
     left: 50%; 
 
     text-align: center; 
 
    } 
 

 
     #talltabs-maroon ul li { 
 
      display: block; 
 
      float: left; 
 
      list-style: none; 
 
      margin: 0; 
 
      padding: 0; 
 
      position: relative; 
 
      right: 50%; 
 
     } 
 

 
      #talltabs-maroon ul li a { 
 
       display: block; 
 
       float: left; 
 
       margin: 0 3px 0 0; 
 
       padding: 0px 10px 6px 10px; 
 
       background: #CD324F; 
 
       text-decoration: none; 
 
       color: #fff; 
 
      } 
 

 
       #talltabs-maroon ul li a p:hover { 
 
        color: aqua; 
 
       } 
 

 
       #talltabs-maroon ul li a:hover { 
 
        padding: 20px 10px 6px 10px; 
 
        color: black 
 
       } 
 

 
      #talltabs-maroon ul li.active a, 
 
      #talltabs-maroon ul li.active a:hover { 
 
       padding: 25px 10px 6px 10px; 
 
       border-width: 5px; 
 
       border-color: aqua; 
 
       color: aqua; 
 
      }

ドロップダウンメニューのCSSを試しました。

.dropbtn { 
 
    list-style-type: none; 
 
    color: white; 
 
    padding: 14px; 
 
    font-size: 14px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
.dropdown-content { 
 
    list-style-type: none; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    /*background-color: black;*/ 
 
    background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/ 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
    padding-right: 2px; 
 
    margin-right: 2px; 
 
} 
 

 
    .dropdown-content a { 
 
     color: white; 
 
     padding: 10px 14px; 
 
     text-decoration: none; 
 
     display: block; 
 
    } 
 

 
     .dropdown-content a:hover { 
 
      /*background-color: gray;*/ 
 
      color: black; 
 
     } 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    /*background-color: #3e8e41;*/ 
 
}

嘆願は、私を助けて。 ありがとう

Answer 1

ブートストラップのドロップダウンメニューを見ることをお勧めします。それは使いやすく、ほとんどのことはすでにあなたのために行われています。幸運 ここにリンクがあります：https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Answer 2

あなたのコードはちょっと混乱しています。私はあなたに簡単なデモを作成しました。ここ

はここに私のHTMLコード

body { 
 
\t background: #212121; 
 
\t font-size:22px; 
 
\t line-height: 32px; 
 
\t color: #ffffff; 
 
\t word-wrap:break-word !important; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t } 
 

 
h1 { 
 
\t font-size: 60px; 
 
\t text-align: center; 
 
\t color: #FFF; 
 
} \t 
 

 
h3 { 
 
\t font-size: 30px; 
 
\t text-align: center; 
 
\t color: #FFF; 
 
} 
 

 
h3 a { 
 
\t color: #FFF; 
 
} 
 

 
a { 
 
\t color: #FFF; 
 
} 
 

 
h1 { 
 
\t margin-top: 100px; 
 
\t text-align:center; 
 
\t font-size:60px; 
 
\t font-family: 'Bree Serif', 'serif'; 
 
\t } 
 

 
#container { 
 
\t margin: 0 auto; 
 
} 
 

 
p { 
 
\t text-align: center; 
 
} 
 

 
nav { 
 
\t margin: 50px 0; 
 
\t background-color: #E64A19; 
 
} 
 

 
nav ul { 
 
\t padding: 0; 
 
    margin: 0; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t } 
 
\t 
 
nav ul li { 
 
\t display:inline-block; 
 
\t background-color: #E64A19; 
 
\t } 
 

 
nav a { 
 
\t display:block; 
 
\t padding:0 10px; \t 
 
\t color:#FFF; 
 
\t font-size:20px; 
 
\t line-height: 60px; 
 
\t text-decoration:none; 
 
} 
 

 
nav a:hover { 
 
\t background-color: #000000; 
 
} 
 

 
/* Hide Dropdowns by Default */ 
 
nav ul ul { 
 
\t display: none; 
 
\t position: absolute; 
 
\t top: 60px; /* the height of the main nav */ 
 
} 
 
\t 
 
/* Display Dropdowns on Hover */ 
 
nav ul li:hover > ul { 
 
\t display:inherit; 
 
} 
 
\t 
 
/* Fisrt Tier Dropdown */ 
 
nav ul ul li { 
 
\t width:170px; 
 
\t float:none; 
 
\t display:list-item; 
 
\t position: relative; 
 
}

<div id="container"> 
 
    <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">WordPress</a> 
 
      <!-- First Tier Drop Down --> 
 
      <ul> 
 
       <li><a href="#">Themes</a></li> 
 
       <li><a href="#">Plugins</a></li> 
 
       <li><a href="#">Tutorials</a></li> 
 
      </ul>   
 
      </li> 
 
      <li><a href="#">Web Design</a> 
 
      <!-- First Tier Drop Down --> 
 
      <ul> 
 
       <li><a href="#">Resources</a></li> 
 
       <li><a href="#">Links</a></li> 
 
       <li><a href="#">Tutorials</a> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t </div>

Answer 3

が同じ例えば私の答えであり、私は

body { 
 
     font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    } 
 

 
    ul { 
 
     text-align: left; 
 
     display: inline; 
 
     margin: 0; 
 
     padding: 15px 4px 17px 0; 
 
     list-style: none; 
 
    } 
 

 
     ul li { 
 
      display: inline-block; 
 
      margin-right: -1px; 
 
      position: relative; 
 
      padding: 15px 20px; 
 
      background: #CD324F; 
 
      cursor: pointer; 
 
      color: black; 
 
      height: 40px; 
 
      width: auto; 
 
      text-align:center; 
 
     } 
 
     ul li a{ 
 
      color:black; 
 
     } 
 

 
      ul li:hover { 
 
       background: #CD324F; 
 
       color: #fff; 
 
       height: 45px; 
 
      } 
 

 
      ul li a:hover { 
 
       color: #fff; 
 
      } 
 

 
      ul li ul { 
 
       padding: 0; 
 
       position: absolute; 
 
       top: 68px; 
 
       left: 0; 
 
       width: 160px; 
 
       -webkit-box-shadow: none; 
 
       -moz-box-shadow: none; 
 
       box-shadow: none; 
 
       display: none; 
 
       opacity: 0; 
 
       visibility: hidden; 
 
      } 
 

 
       ul li ul li { 
 
        background: #ce5068; 
 
        display: block; 
 
        color: #CD324F; 
 
        height: 35px; 
 
       } 
 

 
        ul li ul li:hover { 
 
         background: #CD324F; 
 
         height: 35px; 
 
        } 
 

 
      ul li:hover ul { 
 
       display: block; 
 
       opacity: 1; 
 
       visibility: visible; 
 
      }

<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F"> 
 
<ul><li>Home</li> 
 
    <li>About</li> 
 
    <li> 
 
    Portfolio 
 
    <ul> 
 
     <li>Web Design</li> 
 
     <li>Web Development</li> 
 
     <li>Illustrations</li> 
 
    </ul> 
 
    </li> 
 
    <li>Blog</li> 
 
    <li>Contact</li> 
 
</ul> 
 
</div>

RES、完全なCSSを変更しましたULT：ホバーポートフォリオに、ドロップダウンJSFiddle上の例の作業

表示されます。