个人中心
gpt4 book ai didi

html - 如何使用html和css制作下拉菜单？

转载 作者：行者123 更新时间：2023-11-28 06:11:10 25 4
gpt4 key购买 nike

我试着写了这个 image 的代码，但我遇到了一些困难。我想使用 css 制作下拉菜单，如图所示。为了获得更多帮助，我添加了原始网站链接 http://uos.edu.pk/

我的代码示例在这里

  <style>
  select{
   background-color:#183287;
   color:white;
   border:none;
  }
   div.divofmenu{
    height:40px;
   width:100%;
   border:0px solid white;
   float:left;
   border-bottom:2px solid white;
   background-color:#183287;
  }
 ul.menu
 {
  list-style-type:none;
  margin-left:200px;
  background-color:blue;
  padding:0;
  margin-top:0px;
  border-color:black;
  border-width:3px;

  }
  ul.menu li
  {
  margin-top:0px;

  float:left;
  }


  ul.menu li a{
   text-decoration:none;
   display:inline-block;
   margin-left:3;
   color:white;
   background-color:#183287;
  font-size:90%;
  padding:10px 10px 10px 10px;
   border-left:0.5px solid black;



}
</style>

<body>
<div class="divofmenu">
<ul class="menu">
<li class="about"><a style="border:0px white"href="#">
<select class="select"><option>About us</option></select>
</a>
</li>
<li class="acad"><a href="#">
 <select class="select"><option>Acadmics</option></select>
 </a></li>
<li><a href="#">
<select class="select"><option>campus</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Faculties</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Directorate</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Admisions</option></select>
</a></li>
<li><a href="#">
<s

最佳答案

是这样的吗？

.dropdown{
        background-color:#183287;
	    position: relative;
	    display: inline-block;
	}

	.dropdown-content{
	    display: none;
	    position: absolute;
	    left: -200%;
	    background-color:#183287;
	    min-width: 160px;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	    padding: 12px 16px;
	    color: #fff;
	    text-align: left;
	}

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

    .col-1{
      float: left; 
    }
    .col-2{
      float: right; 
    }

   div.divofmenu{
    height:40px;
   width:100%;
   border:0px solid white;
   float:left;
   border-bottom:2px solid white;
   background-color:#183287;
  }
 ul.menu
 {
  list-style-type:none;
  margin-left:200px;
  background-color:blue;
  padding:0;
  margin-top:0px;
  border-color:black;
  border-width:3px;

  }
  ul.menu li
  {
  margin-top:0px;

  float:left;
  }


  ul.menu li a{
   text-decoration:none;
   display:inline-block;
   margin-left:3;
   color:white;
   background-color:#183287;
  font-size:90%;
  padding:10px 10px 10px 10px;
   border-left:0.5px solid black;



}
<div class="divofmenu">
<ul class="menu">
<li class="about"><a style="border:0px white"href="#">
<div class="dropdown">
     About Us
	<div class="dropdown-content">
			<div class="col-1">
              Column 1
            </div>
            <div class="col-2">
              Column 2
            </div>
	</div>
</div>
</a>
</li>
</ul>
</div>

关于html - 如何使用html和css制作下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36169399/

25 4 0
文章推荐： javascript - Grunt Connect 服务器 CSS 文件为空
文章推荐： Swift Firebase 4.0 - observeSingleEvent 不返回数据集(但身份验证有效)
文章推荐： 垃圾站新方案
文章推荐： css - 使导航栏中的 div 在响应式菜单中显示