ul横向排列，ul下拉框

最新推荐文章于 2023-02-22 10:37:21 发布
最新推荐文章于 2023-02-22 10:37:21 发布
阅读量1.5k 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/svowwc/article/details/46289453
版权
这篇博客介绍了如何使用HTML和CSS创建横向排列的菜单，并实现下拉框效果。通过设置`float:left`实现菜单项的横向布局，利用`:hover`选择器和`display`属性控制下拉框的显示与隐藏。
摘要由CSDN通过智能技术生成
最近又开始做网页，以前做网页总是自己一个人想啊想啊，各种效果都是自己一个人用各种不科学的方法来实现的。以前做的下拉框是做JQuery的效果外加自己的js控制。不过嘛，这次我做网页是参考别人网站的源代码的，所谓学习就是这么一回事，虽然看起来很费劲。
现在我在做的主要是顶部的那个超链接菜单，很多网站都有，主要是好不好看而已。天朝的很多大网站都是用css定制得灰常漂亮。
不过我这个主要是参考unreal engine 4的主页，因为我最近沉迷于虚幻引擎4中不能自拔。
别人家是用ul来实现的，其实很多人都是用ul的，不过我一直不知道怎么个用，我以前一直都是用一堆的div，现在想来我真是白痴。




效果如上(做得不好看不要见怪)


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  绝对零度试验机
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
使用ul实现下拉列表

				
			

			

				

					_thyxyan
				

				

					12-26
					
					1万+
					
				

			

		

		

			
				
使用ul实现下拉列表




使用ul实现下拉列表

*{margin:0px; padding:0px;}//清除默认
ul{
width:520px; //设置ul宽
height:30px; //设置ul高
list-style:none;//去除ul前面的点
}
ul li{
width:64px; 
height:30px; 
border:1px sol

			
		

	



                

              
                



	

		

			

				
					
HTML下拉菜单怎么做成横向,JQuery实现绚丽的横向下拉菜单

				
			

			

				

					weixin_36042436的博客
				

				

					05-31
					
					1273
					
				

			

		

		

			
				
以前经常看见网站有菜单的显示，鼠标移上去就出现下拉的效果，很绚丽，经过看JQuery视频后，发现实现也挺容易的。Html中，通过和标签将所需的元素写出来。代码如下:菜单项1 子菜单项11子菜单项12菜单项2子菜单项21子菜单项22菜单项3子菜单项31子菜单项32最外围的中元素即为菜单项1、菜单项2、菜单项3，下拉菜单分别在各主菜单之下，如果菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜...

			
		

	



                


  
              

                


	

		

			

				
					
ul下拉菜单

				
			

			

				

					11-15
				

			

		

		

			
				
五种实用简洁的系统头部下拉菜单框，使用ul列表实现。

			
		

	





	

		

			

				
					
Ul制作的下拉框

				
			

			

				

					10-20
				

			

		

		

			
				
利用Ul，LI制作的下拉框.加上样式控制。目前还不是很完善，继续完善中

			
		

	



		

			
		



	

		

			

				
					
横向纵向下拉框

				
			

			

				

					jixiuffff的专栏
				

				

					12-30
					
					1036
					
				

			

		

		

			
				
.main {	font: normal medium;	background: blue;	background-repeat: inherit;	 }.sub {	font: normal small;	background: gray;	width: 88px;}.subs{	display:none;	float:none;	widt

			
		

	





	

		

			

				
					
pentaho下拉框横向排列

				
			

			

				

					archer的技术故事
				

				

					03-13
					
					1366
					
				

			

		

		

			
				
pentaho下拉框横向排列
本文的主要目的：在正常添加参数之后，参数的排列默认的竖向排列，美观性比较差，现在调成横向排列，虽然是一个比较基本和简单的功能，但是如果不知道的话，也是非常愁人的。
本文阅读前提：
1、已经能够在pentaho报表中添加下拉框参数，可以参考文章：http://blog.csdn.net/wild46cat/article/details/61414241。



			
		

	





	

		

			

				
					
横向下拉框

					
最新发布

				
			

			

				

					05-29
				

			

		

		

			
				
以下是一个基本的横向下拉框的HTML和CSS代码示例：  HTML代码：  ```   <ul>  <li><a href="#">首页</a></li>    产品  <ul class="dropdown-menu">  <li><a href="#">产品1</a></li>  <li><a href="#">产品2</a></...

			
		

	





	

		

			

				
					
用“ul+li”及css制作韩国风格菜单特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
 /* 使列表项横向排列 */  transition: background-color 0.3s ease; /* 添加平滑过渡效果 */  }   ul.menu li:hover {  background-color: #e0e0e0; /* 悬停时改变背景色 */  }   ul.menu li a {  color: #333;  ...

			
		

	





	

		

			

				
					
HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单

				
			

			

				

					weixin_39657249的博客
				

				

					05-31
					
					3428
					
				

			

		

		

			
				
css+div导航下拉二级菜单竖排效果如何改为横排？，在“下一站”有三个二级竖排菜单，如何能变为横排？困扰了我一天了，让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。 下面是简单的代码实现,仅供参考： * {margin:0px; padding:0px;}li {list-style:none; width:100px; height:30px; font-siz...

			
		

	





	

		

			

				
					
横向UL布局

				
			

			

				

					Reid的专栏
				

				

					11-29
					
					1574
					
				

			

		

		

			
				
#menu { 
 font:12px verdana, arial, sans-serif; 
}
#menu, #menu li {
 list-style:none;
 padding:0;
 margin:0;
}
#menu li { 
 float:left; 
}
#menu li a {
 display:block;
 padding:8px 50px;
 background:

			
		

	





	

		

			

				
					
一款非常好看下拉框样式(select)

				
			

			

				

					09-27
				

			

		

		

			
				
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......

			
		

	





	

		

			

				
					
经典的横向下拉菜单（集合）

				
			

			

				

					08-25
				

			

		

		

			
				
4种好看全面的横向下拉菜单。
CSS + JavaScript

			
		

	





	

		

			

				
					
ul li做横向导航

				
			

			

				

					05-02
				

			

		

		

			
				
用ul li做导航菜单，有助于理解它制作的原理！

			
		

	





	

		

			

				
					
下拉菜单的制作ul 和 li 使用

				
			

			

				

					03-18
				

			

		

		

			
				
NULL
博文链接：https://javaskyle.iteye.com/blog/693508

			
		

	





	

		

			

				
					
ul实现下拉框菜单选择

				
			

			

				

					ZJXianG666的博客
				

				

					04-19
					
					1777
					
				

			

		

		

			
				
<li>
 <h3 class="F7">下拉框选择案例</h3>
 <div class="por">
  <div class="selectBox" style="width: 400px;">
   <div class="selectBox_show" v-on:click.stop="arrowDown"&...

			
		

	





	

		

			

				
					
用ul和li来制作菜单下拉框

					
热门推荐

				
			

			

				

					DiegoBrother的博客
				

				

					08-05
					
					1万+
					
				

			

		

		

			
				


 

鼠标触碰该区域

 

因为我为了网页的更好布局我首先用一个div将ul括起来，ul里有li，li里嵌套一个ul，若是想制作多级菜单，便可再第二个ul的li里再嵌套一个ul便可制作出多级菜单。

部分代码实现如下： 

html代码

&lt;div class="selectProperty"&gt;
              &lt;ul&gt;
                &...

			
		

	





	

		

			

				
					
ul-li（div）下拉列表

				
			

			

				

					weixin_43011230的博客
				

				

					07-11
					
					1518
					
				

			

		

		

			
				
ul-li（div）下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul-li的下拉列表</title>
    <style>
        #sel {
            display...

			
		

	





	

		

			

				
					
下拉菜单——纯ul写的水平下拉菜单

				
			

			

				

					qq_44836633的博客
				

				

					02-22
					
					435
					
				

			

		

		

			
				
纯ul写的水平下拉菜单

			
		

	





	

		

			

				
					
Jquery ul下拉框效果

				
			

			

				

					da_ge_da的专栏
				

				

					10-22
					
					761
					
				

			

		

		

			
				
html select下拉框样式在网站开发时很难控制，网上找的模仿下拉框效果代码太长而且和Jquery有这严重的冲突，于是自己写了一个ul下拉框效果，代码很短也很简单。
 
　　select.htm



    
    
    
    


 
              查商品
              查商品
              查商家

			
		

	





	

		

			

				
					
下拉框选项ul li元素定位

				
			

			

				

					03-29
				

			

		

		

			
				
可以使用CSS选择器来定位下拉框选项ul li元素，例如：  ```css /* 定位下拉框选项ul元素 */ .dropdown-menu {  /* CSS样式 */ }  /* 定位下拉框选项li元素 */ .dropdown-menu li {  /* CSS样式 */ }  /* 定位下拉框...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值