CSSドロップダウンデザインを修正するには

Question

各リストのCSSドロップダウンデザインを修正する方法。私は設計を修正するようには見えない。

HTML：

<div id='cssmenu'> 
<ul> 
<li class='active'> 
<a href='#'>Home</a></li> 
<li><a href='#'>Festival</a></li> 
<li><a href='#'>Products</a></li> 


<li id=ListDrop><a href='#'>Tourist Destinations</a> 
<ul id=Sites> 
    <li><a href='#'>Gallery</a></li> 
    <li><a href='#'>Gallery</a></li> 

</ul> 
</li> 
<li><a href='#'>Gallery</a></li> 
<li><a href='#'>About</a></li> 
<li><a href='#'>Location Map</a></li> 
<li><a href='#'>References</a></li> 
</ul> 
</div> 

CSS：

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
margin: 0; 
padding: 0; 
border: 0; 
list-style: none; 
line-height: 1; 
display: block; 
position: relative; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
content: "."; 
display: block; 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0; 
} 
#cssmenu { 
width: auto; 
border-bottom: 3px solid #47c9af; 
font-family: Raleway, sans-serif; 
line-height: 1; 
} 
#cssmenu ul { 
background: #ffffff; 
} 
#cssmenu > ul > li { 
float: left; 
} 
#cssmenu.align-center > ul { 
font-size: 0; 
text-align: center; 
} 
#cssmenu.align-center > ul > li { 
display: inline-block; 
float: none; 
} 
#cssmenu.align-right > ul > li { 
float: right; 
} 
#cssmenu.align-right > ul > li > a { 
margin-right: 0; 
margin-left: -4px; 
} 
#cssmenu > ul > li > a { 
z-index: 2; 
padding: 18px 25px 12px 25px; 
font-size: 15px; 
font-weight: 400; 
text-decoration: none; 

    } 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
color: #ffffff; 
} 
#cssmenu > ul > li > a:after { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    width: 100%; 
    height: 120%; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: bottom; 
    -moz-transform: perspective(5px) rotateX(2deg); 
    -moz-transform-origin: bottom; 
    transform: perspective(5px) rotateX(2deg); 
    transform-origin: bottom; 
    } 
    #cssmenu > ul > li.active > a:after, 
    #cssmenu > ul > li:hover > a:after, 
    #cssmenu > ul > li > a:hover:after { 
    background: #47c9af; 
    } 

は、私がドロップダウンでサブメニューに同じデザインを適用したかったが、私はそれを修正またはそれを適用するように見えることはできません。誰もコードを教えてくれますか？私はデザインに問題があります。すべてのガイドはおかげで助けになります:)

Answer 1

同じデザインをサブメニューのリンクに適用したい場合は、cssで>を使用しないでください。代わりに
#cssmenu > ul > li.active > a:after
の例あなただけの一番下にあるとギャラリーへのリンクをしたいとsvemiracはあなたただし>

を削除する必要が言ったようにちょうどその同じようにスタイリングした場合
#cssmenu ul li.active a:after

Answer 2

を行うために
適切なドロップダウンメニューが必要W3Schoolsのドロップダウンメニューに従って、よりクリーンなコードをお勧めします。

参考：

http://www.w3schools.com/css/css_dropdowns.asp

http://www.w3schools.com/css/css_navbar.asp

ここでは、クリーナーですjsfiddleです。 ただし、HTMLはフルサイトのメニューであり、別のdivにラップしてください。 https://jsfiddle.net/452a0fu7/1/

HTML：

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">Festival</a></li> 
    <li><a href="#news">Products</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropbtn">Tourist Destinations</a> 
    <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
    </div> 
    </li> 
    <li><a href="#news">Gallery</a></li> 
    <li><a href="#news">About</a></li> 
    <li><a href="#news">Location Map</a></li> 
    <li><a href="#news">References</a></li> 
</ul> 

CSS：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border-bottom: 3px solid #47c9af; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
    text-align: center; 
    vertical-align: middle; 
} 
li { 
    display: inline; 
} 
li a, .dropbtn { 
    display: inline-block; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
li a:hover, .dropdown:hover .dropbtn { 
    background-color: #47c9af; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    color: white; 
} 
li.dropdown { 
    display: inline-block; 
} 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    border-top: 3px solid #47c9af; 
} 
.dropdown-content a { 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 
.dropdown-content a:hover { 
    background-color: #47c9af; 
    border-top-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 
.dropdown:hover .dropdown-content { 
    display: block; 
}