个人中心
gpt4 book ai didi

html - 我的导航栏显示不正确

转载 作者：行者123 更新时间：2023-11-28 07:02:41 24 4
gpt4 key购买 nike

我得到了这个导航栏并且 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>

最佳答案

我看到您添加了 HTML。这允许我为你创建这个......在 fiddle 中查看此渲染。 (请参阅此答案下方的评论)。

如我之前所述(此答案的编辑)，问题是您的导航的自然位置是绝对的(导航、div 等的默认位置)，并且您正在设置包含 li items as fixed，即将所有 li 元素设置为固定，但在导航的绝对空间内，因此它们都将位于顶部:0；左:默认为 0。

设置您想要固定的最外层父容器，内部子容器将坚持您正在寻找的内容......而整个导航保持固定。

您会注意到我添加了一堆 br 来创建一个滚动条，它表明您的导航固定在顶部。我还向 CSS 添加了一个属性，让每个 li 填充 fiddle 屏幕。如果您的 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>

关于html - 我的导航栏显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33138375/

24 4 0
文章推荐： html - 为什么打开 CSS 弹出窗口时页面会滚动到顶部？
文章推荐： javascript - 打开具有特定尺寸的纵向格式窗口的超链接
文章推荐： css - 我的网页正文比内容宽。
文章推荐： c++ - 从 time_point + duration 到 duration 的转换在 clang 上失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com