嵌套的'ul'标签显示意外的输出 - 隐藏菜单的一部分

时间：2016-02-08 17:41:47

标签： html css menu

基本上，我的想法是在左侧分割菜单存根，如4和2在右侧并固定。 因此我写了html＆amp; css，但是在另一个ul标签内嵌入ul标签（对于右侧2个菜单存根），菜单缩短到那两个菜单存根（应该在右侧）。

这是我的HTML＆amp; CSS。

帮助我。

/* CSS Document */
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	position: fixed;
	  top: 0;
    width: 100%;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	border-right:1px solid white;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav ul.right {
    float: right;
    list-style-type: none;
}

@media screen and (max-width: 600px){
    ul.topnav ul.right, 
    ul.topnav li {float: none;}
}color:black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles\stylo.css">
<title> - </title>
</head>

<body>
<ul class="topnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
 <ul class="topnav right">
	<li><a style="border-left:1px solid white;" href="#">News</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
</ul> 
<div style="padding:20px;margin-top:0px;background-color:#1abc9c;height:1500px;">

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您可以使用float左右浮动每个元素;你的topnav元素都是100％宽度，这就是为什么它们彼此叠加的原因。我已经调整了这个和其他一些东西以达到预期的效果。

/* CSS Document */

body {
  margin: 0;
  width: 100%;
}
.nav-container {
  background-color: #333;
  height: 46px;
  max-width: 100%;
  position: fixed;
  width: 100%;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 1px solid white;
}
ul.topnav li a:hover:not(.active) {
  background-color: #111;
}
ul.topnav li a.active {
  background-color: #4CAF50;
}
ul.topnav ul {
  list-style-type: none;
}
ul.topnav.left {
  left: 0;
}
ul.topnav.right {
  right: 0;
}

@media screen and (max-width: 600px) {
  ul.topnav ul.right,
  ul.topnav li {
    float: none;
  }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="styles\stylo.css">
  <title>-</title>
</head>

<body>
  <div class="nav-container">
    <ul class="topnav left">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
     <ul class="topnav right">
      <li><a style="border-left:1px solid white;" href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div style="padding:20px;margin-top:0px;background-color:#1abc9c;height:1500px;">

    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
  </div>
</body>

</html>

相关问题
最新问题