Question

我希望它像响应式下拉菜单一样，但只是在悬停时，我无法在600px或更小时将其正确放置。任何帮助表示赞赏，谢谢:)我想做到这一点，所以当浏览器较小而不是全部时，你可以看到第一个<li>

＆＃13;

body{border:0px;margin:0px;}

ul {
  list-style-type:none;
  display:block;
  width:100%;
  height:50px;
  background:#000000;
  padding:0px;
  margin:0px;
  border:0px;
  position:fixed;
}

li {
  display:inline-block;
  float:left;
  width:16.666666667%;
  height:50px;
  text-align:center;
  line-height:50px;
}

#one{background:#836749;}
#two{background:#629492;}
#three{background:#927493;}
#four{background:#482057;}
#five{background:#293047;}
#six{background:#927403;}


#one:hover{background:#000000;}
#two:hover{background:#000000;}
#three:hover{background:#000000;}
#four:hover{background:#000000;}
#five:hover{background:#000000;}
#six:hover{background:#000000;}

ul li a{
  text-decoration:none;
  color:#FFFFFF;
}


@media only screen and (max-width: 600px) {

ul{
  position:absolute;
  border:0px;
  padding:0px;
  margin:auto;
  height:14.28571428571429%;
  overflow:hidden;
  width:100%;
  background:#038493;
}

ul:hover {
  position:absolute;
  width:100%;
  height:100%;
  margin:auto;
  border:0px;
  padding:0px;
}

li {
  width:100%;
  height:auto:
  background:#038493;
  text-align:center;
  float:left;
}

li:hover {height:14.28571428571429%;}
}

＆＃13;

 <ul>
   <a href="#"><li id="one">link</li></a>
    <a href="#"><li id="two">link</li></a>
    <a href="#"><li id="three">link</li></a>
    <a href="#"><li id="four">link</li></a>
    <a href="#"><li id="five">link</li></a>
    <a href="#"><li id="six">link</li></a>
  </ul>

＆＃13;

Answer 1

如果导航栏中的链接数保持不变，则可以使用 width: 16.6%;作为css标记。

CSS：

＆＃13;

#one, #two, #three, #four, #five, #six {
 
  
  width: 16.6%;
  float: left;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 15px;
}

#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
    background-color: #000;
}

a {
  color: #FFF;
}

#one {
    background-color: red;  
}

#two {
    background-color: blue;  
}

#three {
    background-color: green;  
}

#four {
    background-color: black;  
}

#five {
    background-color: #AAA;  
}

#six {
    background-color: #555;  
}

＆＃13;

<a id="one" href="#one">One</a>
<a id="two" href="#two">Two</a>
<a id="three" href="#three">Three</a>
<a id="four" href="#four">Four</a>
<a id="five" href="#five">Five</a>
<a id="six" href="#six">Six</a>

＆＃13;

要使导航栏贴在页面的两侧，您应该使用<nav> - 代码和<li> - 代码。

Answer 2

＆＃13;

body {
  border: 0px;
  margin: 0px;
}
ul {
  list-style-type: none;
  display: block;
  width: 100%;
  height: 50px;
  background: #000000;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: fixed;
}
li {
  display: inline-block;
  float: left;
  width: 16.666666667%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
#one {
  background: #836749;
}
#two {
  background: #629492;
}
#three {
  background: #927493;
}
#four {
  background: #482057;
}
#five {
  background: #293047;
}
#six {
  background: #927403;
}
#one:hover {
  background: #000000;
}
#two:hover {
  background: #000000;
}
#three:hover {
  background: #000000;
}
#four:hover {
  background: #000000;
}
#five:hover {
  background: #000000;
}
#six:hover {
  background: #000000;
}
ul li a {
  text-decoration: none;
  color: #FFFFFF;
}
@media only screen and (max-width: 600px) {
  ul {
    position: relative;
    border: 0px;
    padding: 0px;
    margin: auto;
    max-height: 50px;
    height: 50px;
    overflow: hidden;
    width: 100%;
    background: #038493;
  }
  ul:hover {
    position: relative;
    width: 100%;
    max-height: 100%;
    height: 100%;
    margin: auto;
    border: 0px;
    padding: 0px;
  }
  li {
    width: 100%;
    height: auto: background: #038493;
    text-align: center;
    float: left;
  }
  li:hover {
    height: 50px;
  }
}

＆＃13;

<a id="one" href="#one">One</a>
<a id="two" href="#two">Two</a>
<a id="three" href="#three">Three</a>
<a id="four" href="#four">Four</a>
<a id="five" href="#five">Five</a>
<a id="six" href="#six">Six</a>

＆＃13;

如何使此响应式导航工作？

2 个答案: