navbarの右側にドロップダウンログインを追加する

Question

私の目的は、ログイン/登録フォームをドロップダウンできるようにすることですが、Navbarの右端にある「ログイン/登録」の部分をどのように置くことができますか私は新しいdivをやろうとしていて、それを左に浮かべましたが、それはnavbarアイテムと重なり合うようです。どんな提案も認められるでしょう。

HTML：

div#navi{ 
 
\t background-color: #C23B22; 
 
} 
 
div#navi_wrapper{ 
 
\t margin: 0 auto; 
 
\t text-align: left; 
 
\t width: 1080px; 
 
} 
 
div#navi ul{ 
 
\t list-style-type: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
div#navi ul li{ 
 
\t display: inline-block; 
 
\t font-size: 15px; 
 
\t font-family: 'Open Sans', sans-serif; 
 
} 
 
div#navi ul li a, visited{ 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t padding: 16px; 
 
\t display: block; 
 
} 
 
div#navi ul li a:hover{ 
 
\t color: #fff; 
 
\t background-color: #AE351E; 
 
} 
 
div#navi ul li:hover ul{ 
 
\t display: block; 
 
} 
 
div#navi ul ul{ 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #fff; 
 
\t color: #000; 
 
\t border-top: 0; 
 
\t min-width: 100px; 
 
} 
 
div#navi ul ul li{ 
 
\t display: block; 
 
} 
 
#navi ul li li a,visited{ 
 
\t color: #C23B22; 
 
\t text-decoration: none; 
 
} 
 
#navi ul ul li a:hover{ 
 
\t background-color: #fff; 
 
\t color: #C23B22; 
 
\t font-weight: bold; 
 
}

<div id="navi"> 
 
\t \t <div id="navi_wrapper"> 
 
\t \t \t <ul> 
 
     <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li> 
 
\t \t \t \t <li><a href="#">REVIEWS</a> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">PC Games</a></li> 
 
\t \t \t \t \t \t <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">Playstation 4</a></li> 
 
\t \t \t \t \t \t <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">XBOX One</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">ABOUT US</a></li> 
 
\t \t \t \t \t <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">CONTACT</a></li> 
 

 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div>

https://jsfiddle.net/q07jv74x/

Answer 1

問題は、あなたが任意のネストされた要素のCSSプロパティをオーバーライドしますCSSのプロパティを設定するHTML要素のIDを使用しています。私の代わりにクラスを使用することをお勧めします：

HTML：

<div class="navi"> 
     <div class="navi_wrapper"> 
      <ul> 
     <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li> 
       <li><a href="#">REVIEWS</a> 
        <ul> 
         <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">PC Games</a></li> 
         <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">Playstation 4</a></li> 
         <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">XBOX One</a></li> 
        </ul> 
        <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">ABOUT US</a></li> 
        <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">CONTACT</a></li>  
      <li class="navi_float_right"><a href="#">LOGIN</a></li> 

      </ul> 
     </div> 
    </div> 

はCSS：あなたは、通常navbarsは全幅を拡張したいと

.navi{ 
    background-color: #C23B22; 
} 
.navi_wrapper{ 
    margin: 0 auto; 
    text-align: left; 
}  
.navi ul{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
.navi ul li{ 
    display: inline-block; 
    font-size: 15px; 
    font-family: 'Open Sans', sans-serif; 
} 
.navi ul li a, visited{ 
    color: #fff; 
    text-decoration: none; 
    padding: 16px; 
    display: block; 
} 
.navi ul li a:hover{ 
    color: #fff; 
    background-color: #AE351E; 
} 
.navi ul li:hover ul{ 
    display: block; 
} 
.navi ul ul{ 
    display: none; 
    position: absolute; 
    background-color: #fff; 
    color: #000; 
    border-top: 0; 
    min-width: 100px; 
} 
.navi ul ul li{ 
    display: block; 
} 
.navi ul li li a,visited{ 
    color: #C23B22; 
    text-decoration: none; 
} 
.navi ul ul li a:hover{ 
    background-color: #fff; 
    color: #C23B22; 
    font-weight: bold; 
} 

.navi_float_right{ 
    float: right; 
} 

私はまたnavi_wrapper CSSクラスからwidthプロパティを削除しました画面の

Working JSFiddle：https://jsfiddle.net/pLofgdoy/1/