gpt4 book ai didi

css - 下拉菜单水平而不是垂直

转载 作者:太空宇宙 更新时间:2023-11-04 11:53:15 25 4
gpt4 key购买 nike

我一直在想办法解决这个下拉菜单。在我悬停并且菜单显示为水平而不是垂直之前,它看起来还不错。是不是 css 有问题?

感谢您的帮助!

JS Fiddle

HTML

<body> 
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
<ul style="list-style: none;">
<li><a href="../index.html">Home</a></li>
<li><a href="../research.htm">Research</a></li>
<li><a href="../susantaylor.htm">Susan Taylor</a></li>
<li><a href="../LaboratoryMembers.html">Lab Members</a>
<ul>
<li><a href="../currentmembers.htm">Current Members</a></li>
<li><a href="../formermembers.htm">Former Members</a></li>
<li><a href="../gallery.htm">Gallery</a></li>
</ul>
</li>
<li><a href="../publications.htm">Publications</a></li>
<li><a href="../links.htm">Links</a></li>
<li><a href="../contact.htm">Contact Us</a></li>
</ul>
</nav>

<br>
</br>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" -- >EditRegion3<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>

</div>
<footer class="footer" id="footer">
<div align="center">
<p>Taylor Laboratory<br>
Leichtag Biomedical Research Building
4th Floor, Room 412
<br>
University of California, San Diego
<br>
9500 Gilman Dr. mc0654<br>
La Jolla, CA 92093
<br>
Ph: (858) 534-8190
<br>
Fax: (858) 534-8193 </p>
</div>
</footer>


</div>


</body>

CSS 李尔{ 显示:无;

li:hover ul{
display:block;
}
body {
margin: 0px;
background-color: #CCCCCC;
}
.content {
background-color: #FFFFFF;
padding-right: 6px;
padding-left: 6px;
}
.footer {
background-color: #357f7f;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
position: absolute;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}


a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1280px;
min height: 100%;
position: relative;
height: auto;
min-height: 100%
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content-spacer-top {
height: 10px;
}

#content-spacer-bottom{
height:1%;
}

#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
float: left;
text-align: center;
width: 14.28%;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
display: block;
list-style-type: none;
clear: none;
margin: 0px;
height: 2%;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #357F7F;
border-right-color: #357F7F;
border-bottom-color: #357F7F;
border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}

a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}

最佳答案

好的,所以在查看了您更新后的 fiddle 后,我能够立即发现问题所在。首先你的代码真的很乱(抱歉,但它是哈哈)而且你有很多不必要的 css 声明。

它写得太糟糕了,我刚刚写了一个全新的 fiddle 并包括一个可用的导航栏。在下面找到相关代码。

HTML:

<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../research.html">Research</a></li>
<li><a href="../susantaylor.html">Susan Taylor</a></li>
<li><a href="../LaboratoryMembelrs.html">Lab Members</a>
<ul>
<li><a href="../currentmembers.html">Current Members</a></li>
<li><a href="../formermembers.html">Former Members</a></li>
<li><a href="../gallery.html">Gallery</a></li>
</ul>
</li>
<li><a href="../publications.html">Publications</a></li>
<li><a href="../links.html">Links</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</nav>

CSS:

nav {
display: table;
border-top: 1px solid #357F7F;
border-bottom: 1px solid #357F7F;
}
nav ul {
display: table-row;
position: relative;
margin: 0;
padding: 0;
z-index: 1;
}
nav ul a {
display: block;
color: black;
text-decoration: none;
padding: 10px 15px;
font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
position: relative;
display: inline-block;
display: table-cell;
width: 1%;
list-style-type: none;
text-align: center;
}
nav ul li:hover {
background-color: #357F7F;
}
nav ul li:hover a {
color: white;
}
nav ul ul{
display: none;
position: absolute;
background: rgba(0,0,0,0.4);
width: 100%;
}
nav ul ul li {
width: 100%;
display: inline-block;
}
nav ul li:hover > ul {
display: block;
}

JSFiddle

希望对您有所帮助! :)

关于css - 下拉菜单水平而不是垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30470396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com