Question

我的目标是能够做一个下拉登录/注册表格但是我仍然坚持如何将“登录/注册”部分放在导航栏的最右边，我试图做一个新的div并将其浮动但似乎与导航栏项重叠，任何建议都将受到赞赏。

HTML：

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

<div id="navi">
		<div id="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>
			</ul>
		</div>
	</div>

https://jsfiddle.net/q07jv74x/

Answer 1

问题是您使用HTML元素的ID来设置CSS属性，该属性将覆盖任何嵌套元素的CSS属性。我建议改用Classes：

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：

.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属性，因为您通常希望导航栏扩展屏幕的整个宽度。

使用JSFiddle：https://jsfiddle.net/pLofgdoy/1/

将下拉登录添加到导航栏的右侧

1 个答案: