如何制作带有标签a的下拉菜单？

时间：2019-11-23 09:50:13

标签： html css

如何制作带有标签import re with open('test.txt', 'r')as f: s = f.read() ARGVs = ['wol','ac'] cond = '|'.join([f'\w*{patt}\w*' for patt in ARGVs]) re.findall(cond,s) Out[4]: ['aardwolf', 'aac', 'akac', 'abaca', 'abactinal', 'abacus'] 而不是按钮的下拉菜单？

我尝试使用按钮标签，但有点与我的布局混乱。我想使用<a>标签来做，但是下拉框超过了文本，这使它丢失了，而不是在文本下方。

这里很难解释，但您可以在下面更详细地了解

<a>
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 4em;
  width: 100%;
  background-color: black;
  box-sizing: border-box;
  padding: 20px 24px;
  transition: background-color 0.4s ease-out;
}

nav a {
  float: right;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 430;
  color: lightgrey;
}

nav a.active {
  color: #d4af37;
}

nav a:hover:not(.active) {
  color: white;
}

nav.scroll {
  background-color: black;
  opacity: 0.8;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  text-align: center;
  font-family: Poppins;
  font-size: 15px;
  font-weight: 430;
  color: lightgrey;
  padding: 0px 16px;
  top: 100%;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

fiddle link

问题出在“游览与活动”按钮上。

4 个答案:

答案 0 :(得分：1)

将代码复制到HTML文件中以更有效地尝试链接

我将包含链接的<div>转换为下拉列表 &&我在css文件中从到进行了必要的修改 我将<select>设置为下拉菜单，并始终打开显示的链接数size = "3" 

nav {
				position: fixed;
				top: 0;
				left: 0;
				height: 4em;
				width: 100%;
				background-color: black;
				box-sizing: border-box;
				padding: 20px 24px;
				transition: background-color 0.4s ease-out;
			}

			nav a {
				float: right;
				text-align: center;
				padding: 0px 16px;
				text-decoration: none;
				font-size: 15px;
				font-weight: 430;
				color: lightgrey;
			}
			
			nav a.active{
				color: #d4af37;
			}
			
			nav a:hover:not(.active){
				color: white;
			}
			
			nav.scroll {
				background-color: black;
				opacity: 0.8;
			}
			
			.dropdown {
			  float: right;
			  overflow: hidden;
			}

			.dropdown .dropbtn {
				text-align: center;
				font-family: Poppins;
				font-size: 15px;
				font-weight: 430;
				color: lightgrey;
				padding: 0px 16px;
				top: 100%;
				background-color: inherit;
				margin: 0;
			}
			
			.dropdown-content {
			  display: none;
			  position: absolute;
			  background-color: lightgrey;
			  min-width: 250px;
			  z-index: 1;
			}

			.dropdown-content option {
			  float: none;
			  color: black;
			  padding: 12px 16px;
			  text-decoration: none;
			  display: block;
			  text-align: left;
			}

			.dropdown-content option:hover {
			  color: #ddd;
			}

			.dropdown:hover .dropdown-content {
			  display: block;
			}
<nav id="navbar">
    <div style="padding-left:105px; padding-right:120px;">
    <a style="color: white; font-weight: bold; font-size: 20px; float:left">LOGO</a>
    <a href="blog.html">Book A Trip</a>
        <div class="dropdown">
        <a class="dropbtn">Tours &amp; Activity</a>
        <select class="dropdown-content" size="3" onchange="window.location=this.options[this.selectedIndex].value">
		        <option value="https://www.facebook.com">link 1</option>
		        <option value="https://www.google.com">link 2</option>
		        <option value="https://www.youtube.com">link 3</option>
	        </select>
        </div>
    <a href="rooms.html">About</a>
    <a class="active" href="index.html">Home</a>
    </div>
</nav>

答案 1 :(得分：0)

您可以使用

except URLError

答案 2 :(得分：0)

您应该将.dropdown-content的顶部位置设置为

.dropdown-content {
    top: 35px;
}

但是我为您提供了一种更好的方法，因此下拉菜单对于其父级.dropdown来说是绝对的

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 4em;
  width: 100%;
  background-color: black;
  box-sizing: border-box;
  padding: 0px 24px;
  transition: background-color 0.4s ease-out;
}

nav a {
  float: right;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 430;
  color: lightgrey;
}

nav a.active{
  color: #d4af37;
}

nav a:hover:not(.active){
  color: white;
}

nav.scroll {
  background-color: black;
  opacity: 0.8;
}

.dropdown {
  float: right;
  position: relative;
}

.dropdown .dropbtn {
  text-align: center;
  font-family: Poppins;
  font-size: 15px;
  font-weight: 430;
  color: lightgrey;
  padding: 20px 16px;
  top: 100%;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  z-index: 1;
  top: 100%;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<nav id="navbar">
  <div style="padding-left:105px; padding-right:120px;">
    <a style="color: white; font-weight: bold; font-size: 20px; float:left">LOGO</a>
    <a href="blog.html">Book A Trip</a>
    <div class="dropdown">
      <a class="dropbtn">Tours & Activity</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <a href="rooms.html">About</a>
    <a class="active" href="index.html">Home</a>
  </div>
</nav>

请注意我在课堂上所做的更改。

答案 3 :(得分：0)

我重新创建您的项目，使用列表元素作为菜单会更好。

body{
  margin:0
}

*{
  box-sizing:border-box
}

nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:black;
  padding:1.5rem 8rem;
}

nav .nav-logo{
  font-size:calc(1rem + .25rem);
  color:white;
  font-weight:bold
}

nav a{
  color:lightgrey;
  text-decoration:none;
  font-size:1rem
}

nav a.active{
  color:#d4af37
}

nav a:hover:not(.active){
  color:white
}

nav ul{
  list-style:none;
  padding:0;
  margin:0;
}

nav ul:not(.dropdown-content){
  display:flex;
}


nav ul > li{
  margin-right:1rem
}

.dropdown{
  position:relative;
}

.dropdown-content{
  position:absolute;
  top:1.5rem;
  background:grey;
  opacity:0;
  visibility:hidden;
  transition:250ms
}

.dropdown a:hover ~ .dropdown-content, .dropdown-content:hover{
  opacity:1;
  visibility:visible
}



.dropdown-content li a{
  font-size:calc(1em - 1px);
  padding:.8rem;
  display:flex;
  min-width:10rem
}
<nav>
  <div class="nav-left">
    <a href="#" class="nav-logo">LOGO</a>
  </div>
  <div class="nav-right">
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="dropdown">
        <a href="#">Tours & Activity</a>
        <ul class="dropdown-content">
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
        </ul>
      </li>
      <li><a href="#">Book A Trip</a></li>
    </ul>
  </div>
</nav>

相关问题
最新问题