我的导航栏显示不正确

时间：2015-10-15 01:35:13

标签： html css navigation

我有这个导航栏和HTML工作;我尝试通过固定位置来改变CSS。它目前不显示每个选项只有一个。我希望这个位置保持固定但显示整个菜单而不仅仅是一个部分

[I circled the part that is messed up][1]


div {height:150px;border:1px yellow; background:#ffffff ;}
nav.menu  {
	margin:19px auto; 
	padding:0;
	font-size:.8em;
	text-align:center; 
	}
nav.menu > ul {
	display:block;
	}
nav.menu li {  
	float:left; /* makes menu horizontal */
	list-style-type:none; /* removes default bullets off lists */
	position:fixed; /* position context for child list */
	}
nav.menu ul li a {
	display:block; /* makes link fill line*/
	padding:1em 9em;
	background-clip:padding-box; /* background only under padding, not border */  
	text-align:left;
	text-decoration:none; /* removes link underlining */
	font-family:"Source Sans Pro", helvetica, sans-serif;
	font-style: normal;
	font-weight:600;
	font-size:1.2em;
	color:white;
	-webkit-font-smoothing: antialiased; /* prevents pop of anti-alias change at end of opacity transition */
	}
nav.menu li.choice1 a {
	background:black;
	}
nav.menu li.choice2 a {
	background:black;
	}
nav.menu li.choice3 a {
	background:black;
	}
nav.menu li.choice4 a {
	background:black;
	}
nav.menu li.choice5 a {
	background:black;
	}
nav.menu li:hover > a {
	color:red;
	border-color:#fff;
	border:0;
	}
nav.menu li:last-child a  {
	border-bottom-right-radius:10px;
	}
nav.menu li:first-child a  {border-top-left-radius:10px;}

/* level 2 menus */
nav.menu li ul { 
	opacity:0; 	
	visibility:hidden; position:absolute; /* position relative to parent menu */
	width:12em;
	left:0px;   /* aligns left of sub-menu to parent */
	top:100%; 	/* aligns bottom of sub-menu to parent */
	}
 .touch nav.menu li ul { /* uses modernizer to only transition opacity of touch devices */	
	-webkit-transition: 1s opacity; 
	   -moz-transition: 1s opacity;
	        transition: 1s opacity; 
	}
nav.menu li ul { 
	-webkit-transition: 1s all .2s; 
	   -moz-transition: 1s all .2s;
	        transition: 1s all .2s; 
	}
nav.menu li:hover > ul {
	opacity:1; /* both properties are transitioned */
	visibility:visible;
	}
nav.menu li li {
	float:none; /* kills inherited float - makes list stack */
	}
nav.menu li li:first-child a {
	border-radius:0;
	}
nav.menu li li:last-child a {
	border-bottom-left-radius:10px;
	}
.no-csstransitions nav.menu li ul { /* for no-transitions browsers */
	visibility:visible; /* overrides transitions version */
	opacity:1;  /* overrides transitions version */
	display:none; /* hides menu if no css transition capability */
	}
.no-csstransitions nav.menu li:hover > ul {
	display:block; /* displays menu when parent hovered */
	}
<!DOCTYPE html PUBLIC >
 <html>

  <head>
   <link rel="stylesheet" type="text/css" href="CSS1.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>LeadingEdgeLabs Home</title>
  </head>

  <body>

<!--navigation bar at the top-->

 
   <div>
<nav class="menu">
    <ul>
     <li class="choice1"><a href="home-page.html">Home</a></li>
     <li class="choice2"><a href="photo-gallery.html">Photo gallery</a></li>
     <li class="choice3"><a href="blogs.html">Blogs</a></li>
     <li class="choice4"><a href="contact-us.html">Contact us</a>
<ul>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
<ul></li>


    </ul>
   </div>

1 个答案:

答案 0 :(得分：0)

我看到你添加了HTML。这允许我为你创造这个.... 在小提琴中查看此渲染。 （见本答案下面的评论）。

正如我之前所说的（编辑此答案）问题是导航的自然位置是绝对的（导航，div等的默认值），并且您正在设置包含 li 固定的项目，即将所有 li 项目设置为固定，但在导航的绝对空间内，所以它们都将返回顶部：0; left：默认为0。

设置您想要修复的最外层父容器，内部子容器将遵循您要查找的内容...而整个导航保持固定。

你会注意到我添加了一堆 br 来创建一个滚动条，它显示你的导航被固定在顶部。我还在CSS中添加了一个属性，让每个 li 填充小提琴屏幕。如果你的CSS1.css中有其他样式来处理这个问题，你可以从该规则中删除该属性。 

div {
    height:150px;
    border:1px yellow; 
    background:#ffffff ;
}
nav.menu  {
    position: fixed;
	margin: auto; 
	padding:0;
	font-size:.8em;
	text-align:center; 
	}
nav.menu > ul {
	display:inline; /* Allows li elements to sit side by side */
	}
nav.menu li {  
	float:left; /* makes menu horizontal */
	list-style-type:none; /* removes default bullets off lists */
	position:relative; /* position context for child list */
    text-align:center;
	}
nav.menu ul li a {
	display:inline; /* Changed to INLINE so that it will allow elements side by side*/
	padding:1em 9em;
    background-clip:padding-box;/* background only under padding, not border */  
	text-align:left;
	text-decoration:none; /* removes link underlining */
	font-family:"Source Sans Pro", helvetica, sans-serif;
	font-style: normal;
	font-weight:600;
	font-size:1.2em;
	color:white;
	-webkit-font-smoothing: antialiased; /* prevents pop of anti-alias change at end of opacity transition */
	}
nav.menu li.choice1 a {
	background:black;
	}
nav.menu li.choice2 a {
	background:black;
	}
nav.menu li.choice3 a {
	background:black;
	}
nav.menu li.choice4 a {
	background:black;
	}
nav.menu li.choice5 a {
	background:black;
	}
nav.menu li:hover > a {
	color:red;
	border-color:#fff;
	border:0;
	}
nav.menu li:last-child a  {
	border-bottom-right-radius:10px;
	}
nav.menu li:first-child a  {border-top-left-radius:10px;}

/* level 2 menus */
nav.menu li ul { 
	opacity:0; 	
	visibility:hidden; position:absolute; /* position relative to parent menu */
	width:12em;
	left:0px;   /* aligns left of sub-menu to parent */
	top:100%; 	/* aligns bottom of sub-menu to parent */
	}
 .touch nav.menu li ul { /* uses modernizer to only transition opacity of touch devices */	
	-webkit-transition: 1s opacity; 
	   -moz-transition: 1s opacity;
	        transition: 1s opacity; 
	}
nav.menu li ul { 
	-webkit-transition: 1s all .2s; 
	   -moz-transition: 1s all .2s;
	        transition: 1s all .2s; 
	}
nav.menu li:hover > ul {
	opacity:1; /* both properties are transitioned */
	visibility:visible;
	}
nav.menu li li {
	float:none; /* kills inherited float - makes list stack */
	}
nav.menu li li:first-child a {
	border-radius:0;
	}
nav.menu li li:last-child a {
	border-bottom-left-radius:10px;
	}
.no-csstransitions nav.menu li ul { /* for no-transitions browsers */
	visibility:visible; /* overrides transitions version */
	opacity:1;  /* overrides transitions version */
	display:none; /* hides menu if no css transition capability */
	}
.no-csstransitions nav.menu li:hover > ul {
	display:block; /* displays menu when parent hovered */
	}
<!--navigation bar at the top-->
<div>
<nav class="menu">
    <ul>
     <li class="choice1"><a href="home-page.html">Home</a></li>
     <li class="choice2"><a href="photo-gallery.html">Photo gallery</a></li>
     <li class="choice3"><a href="blogs.html">Blogs</a></li>
     <li class="choice4"><a href="contact-us.html">Contact us</a>
<ul>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
<ul></li>


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

相关问题
最新问题