ドロップダウンで修正されたナビゲーション

Question

私はCSSでナビゲーションを設計しています。私はそれをカップルのドロップダウンメニューで固定ナビゲーションにしたい。私はトップのナビゲーションまたはドロップダウンを取得することができますが、私は両方を行うことはできません。誰にも何か提案はありますか？

CSS：

body {margin: 0; font-family: 'SF Comic Script';} 

.topnav-brand { 
float: left; 
margin-left: 30px; 
padding: 15px 15px; 
font-size: 24px; 
line-height: 20px; 
height: 24px; 
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); 
} 

.topnav-brand:hover, 
.topnav-brand:focus { 
    text-decoration: none; 
    color: #5e5e5e; 
    background-color: transparent; 
} 

ul.topnav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #7a003d; 
background-image: -webkit-linear-gradient(top, #ad0057 0%, #7a003d 100%); 
background-image: -o-linear-gradient(top, #ad0057 0%, #7a003d 100%); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#ad0057), to(#7a003d)); 
background-image: linear-gradient(to bottom, #ad0057 0%, #7a003d 100%); 
background-repeat: repeat-x; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffad0057', endColorstr='#ff7a003d', GradientType=0); 
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
border-radius: 2px; 
position: fixed; 
top: 0; 
width: 100%; 
} 

ul.topnav li { 
    float: left; 
} 

ul.topnav li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

ul.topnav li a:hover, .dropdown:hover .dropbtn { 
    background-color: #470024; 

} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    min-width: 160px; 
    background-color: #470024; 
    top: 100%; 
} 

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

.dropdown-content a:hover {color: #7a003d; background-color: #ffffff; 
    background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #ffffff 100%); 
    background-image: -o-linear-gradient(top, #f2f2f2 0%, #ffffff 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff)); 
    background-image: linear-gradient(to bottom, #f2f2f2 0%, #ffffff 100%); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffffffff', GradientType=0); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    border-radius: 2px;} 

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

HTML（正しくリンク）

<ul class="topnav"> 
    <a class="topnav-brand">Computer Services Unit</a> 
    <li><a href="#home">Infrastructure</a></li> 
    <li class="dropdown"><a href="#news" class="dropbtn">Classroom &amp; Collaborative Services</a> 
    <div class="dropdown-content"> 
    <a href="#">Mobile</a> 
    <a href="#">Network</a> 
    <a href="#">Link 3</a> 
    </div> 
    </li> 
    <li><a href="#contact">Tech Shop</a></li> 
    <li><a href="#about">Application &amp; Web Development</a></li> 
    <li><a href="#about">Business Analysis &amp; Prohect Management</a></li> 
</ul> 

Answer 1

このコードを試してみてください、それはあなたを助けるでしょう。

body { 
 
\t padding-top:50px; 
 
\t margin:0; 
 
} 
 
nav { 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
\t width:100%; 
 
\t z-index:999; 
 
} 
 
nav ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t background-color: Crimson; 
 
\t display: inline-block; 
 
\t width: 100%; 
 
} 
 
nav li { 
 
\t float: right; 
 
\t position: relative; 
 
} 
 
nav li a { 
 
\t display: block; 
 
\t color: white; 
 
\t text-align: center; 
 
\t padding: 14px 16px; 
 
\t text-decoration: none; 
 
} 
 
nav li a:hover { 
 
\t background-color: #111; 
 
} 
 
nav ul ul { 
 
\t position: absolute; 
 
\t display: none; 
 
\t left: 0; 
 
\t z-index: 999; 
 
} 
 
nav ul ul li { 
 
\t float: none; 
 
\t width:100%; 
 
} 
 
nav ul ul ul { 
 
\t left: 100%; 
 
\t top: 0; 
 
\t display: float; 
 
} 
 
nav li:hover > ul { 
 
\t display: block; 
 
}

<nav> 
 
    <ul class="topnav"> 
 
    <li style="float:left"> <a class="topnav-brand">Computer Services Unit</a> </li> 
 
    <li><a href="#home">Infrastructure</a></li> 
 
    <li><a href="#news" class="dropbtn">Classroom &amp; Collaborative Services</a> 
 
     <ul> 
 
     <li> <a href="#">Mobile</a></li> 
 
     <li> <a href="#">Network</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#contact">Tech Shop</a></li> 
 
    <li><a href="#about">Application &amp; Web Development</a></li> 
 
    <li><a href="#about">Business Analysis &amp; Prohect Management</a></li> 
 
    </ul> 
 
</nav>