我希望它像响应式下拉菜单一样,但只是在悬停时,我无法在600px或更小时将其正确放置。任何帮助表示赞赏,谢谢:)我想做到这一点,所以当浏览器较小而不是全部时,你可以看到第一个<li>
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;
答案 0 :(得分:1)
如果导航栏中的链接数保持不变,则可以使用
width: 16.6%;
作为css标记。
CSS:
#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>
- 代码。
答案 1 :(得分:0)
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;