は家の横にある最初のボタンの横の下のナビゲーションバーで

Question

https://codepen.io/shaswat/pen/XzpRXL

ダウン三角形を作成する方法

または下矢印をドロップダウン矢印や三角形を追加すると、ホーム上のホバー三角形や矢印が変換する必要があります逆さま

1. 任意のHTML（入力タイプ、値など）を変更傾けるいますが、その、今

2. なしブートストラップを見てどのようにナビゲーションバーを壊すべきではない、いくつかの要素を追加することができます

HTML

<div id='cssmenu'> 
<ul> 
    <li ><input type=submit value=home> 
    <ul> 
     <li><input type=submit value=home1 /></li> 
     <li><input type=submit value=home2 /></li> 
     <li><input type=submit value=home3 /></li> 
     </ul> 


    </li> 
    <li><input type=submit value=products class=active /> 

    </li> 
    <li><input type=submit value=about /> 
    </li> 
    <li><input type=submit value=Contact /></li> 
</ul> 
</div> 

CSS

#cssmenu > ul ul input{ 
    border-top: 1px solid; 
} 
#cssmenu input { 
    padding: 0; 
    border-right: 1px solid; 
    border-top: none; 
    border-bottom: none; 
    border-left: none; 
    background: none; 
    border-radius : 0px 5px 0px 0px; 
} 
/* Menu CSS */#cssmenu, 
#cssmenu > ul { 
    background: black; 
    padding-bottom: 3px; 
    border-radius: 5px 5px 5px 5px; 
} 
#cssmenu:before, 
#cssmenu:after, 
#cssmenu > ul:before, 
#cssmenu > ul:after { 
    content: ""; 
    display: table; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    clear: both; 
} 
#cssmenu { 
    width: auto; 
    zoom: 1; 
} 
#cssmenu > ul { 
    background: blue; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#cssmenu > ul li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#cssmenu > ul > li { 
    float: left; 
    position: relative; 
} 
#cssmenu > ul > li > input { 
    padding: 12px 25px; 
    display: block; 
    color: white; 
    font-size: 13px; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 #0d0d0d; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); 

} 
#cssmenu > ul > li:hover > input { 
    background: red; 
    -webkit-transition: all 0.40s ease-in-out; 
    -moz-transition: all 0.40s ease-in-out; 
    -ms-transition: all 0.40s ease-in-out; 
    transition: all 0.40s ease-in-out; 
} 

#cssmenu > ul > li.active > input, 
#cssmenu > ul > li > input.active { 
    background: black; 
    color:#fff; 
} 
/* Childs */ 
#cssmenu > ul ul { 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 40px; 
    background: green; 
    margin: 0; 
    padding: 0; 
    z-index: -1; 
    box-shadow: 5px 5px 5px #808080; 
} 
#cssmenu > ul li:hover ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
    color: #fff; 
    z-index: 2; 
    top: 40px; 
    left: 0; 
} 

#cssmenu > ul ul li { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
#cssmenu > ul ul li input { 
    padding: 12px ; 
    display: block; 
    color: white; 
    font-size: 14px; 
    text-decoration: none; 
    width: 150px; 
    border-left: 4px solid transparent; 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    transition: all 0.30s ease-in-out; 
} 
#cssmenu > ul ul li input:hover { 
    border-left: 10px solid #d64e34; 
    background: grey; 
} 
#cssmenu > ul ul li input:active { 
    background: green; 
} 

Answer 1

それは上向きと下向きとの間で遷移する。

HTML

<div id='cssmenu'> 
<ul> 
    <li ><input type=submit value='Home'/> 
    <div class="downArrow"> &#9660; </div> 
    <div class="upArrow"> &#9650; </div>  
    <ul> 
     <li><input type=submit value=home1 /></li> 
     <li><input type=submit value=home2 /></li> 
     <li><input type=submit value=home3 /></li> 
     </ul> 


    </li> 
    <li><input type=submit value=products class=active /> 

    </li> 
    <li><input type=submit value=about /> 
    </li> 
    <li><input type=submit value=Contact /></li> 
</ul> 
</div> 

CSS

#cssmenu > ul ul input{ 
    border-top: 1px solid; 
} 
#cssmenu input { 
    padding: 0; 
    border-right: 1px solid; 
    border-top: none; 
    border-bottom: none; 
    border-left: none; 
    background: none; 
    border-radius : 0px 5px 0px 0px; 
} 
/* Menu CSS */#cssmenu, 
#cssmenu > ul { 
    background: black; 
    padding-bottom: 3px; 
    border-radius: 5px 5px 5px 5px; 
} 
#cssmenu:before, 
#cssmenu:after, 
#cssmenu > ul:before, 
#cssmenu > ul:after { 
    content: ""; 
    display: table; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    clear: both; 
} 
#cssmenu { 
    width: auto; 
    zoom: 1; 
} 
#cssmenu > ul { 
    background: blue; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#cssmenu > ul li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#cssmenu > ul > li { 
    float: left; 
    position: relative; 
} 
#cssmenu > ul > li > input { 
    padding: 12px 30px; 
    display: block; 
    color: white; 
    font-size: 13px; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 #0d0d0d; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); 

} 
#cssmenu > ul > li:hover > input { 
    background:violet; 
    -webkit-transition: all 0.40s ease-in-out; 
    -moz-transition: all 0.40s ease-in-out; 
    -ms-transition: all 0.40s ease-in-out; 
    transition: all 0.40s ease-in-out; 
} 

#cssmenu > ul > li.active > input, 
#cssmenu > ul > li > input.active { 
    background: black; 
    color:#fff; 
} 
/* Childs */ 
#cssmenu > ul ul { 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 40px; 
    background: green; 
    margin: 0; 
    padding: 0; 
    z-index: -1; 
    box-shadow: 5px 5px 5px #808080; 
} 
#cssmenu > ul li:hover ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
    color: #fff; 
    z-index: 2; 
    top: 40px; 
    left: 0; 
} 

#cssmenu > ul ul li { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
#cssmenu > ul ul li input { 
    padding: 12px ; 
    display: block; 
    color: white; 
    font-size: 14px; 
    text-decoration: none; 
    width: 150px; 
    border-left: 4px solid transparent; 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    transition: all 0.30s ease-in-out; 
} 
#cssmenu > ul ul li input[type=submit]:hover { 
    border-left: 10px solid #d64e34; 
    background: grey; 
} 
#cssmenu > ul ul li input[type=submit]:active { 
    background: green; 
} 

.downArrow { 
    display: block; 
    position: absolute; 
    top: 12px; 
    right: 2px; 
    color:white; 
} 

.upArrow { 
    display: none; 
    position: absolute; 
    top: 12px; 
    right: 2px; 
    color:white;  
} 

#cssmenu li:first-child:hover .upArrow{ 
    display: block; 
} 

#cssmenu li:first-child:hover .downArrow{ 
    display: none; 
} 

Answer 2

使用フォント素晴らしいアイコンクラスfa-caret-upとfa-caret-down 上下キャレットを切り替えるには、JavaScriptのonmousehoverとonmouseout機能を使用しています。 は、フォント素晴らしいとjQuery LIBSが含ま

<a onmouseover="changecaretup()" onmouseout="changecaretdown()" >home <i id="caret" class="fa fa-caret-down" aria-hidden="true"></i></a> 

Javaスクリプトのみにするために、CSSをusin

https://codepen.io/shaswat/pen/XzpRXL

Atlastは、HTMLユニコード溶液で、自分でそれをやった

function changecaretup(){ 
$("#caret").removeClass("fa-caret-down"); 
$("#caret").addClass("fa-caret-up"); 

} 

    function changecaretdown(){ 
    $("#caret").removeClass("fa-caret-up"); 
    $("#caret").addClass("fa-caret-down"); 

    }