When setting the background of <ul>, it works fine under IE, but in the 360 Rapid browser it is always above the text. I hope experts can help_html/css

When setting the background of

, it works fine under IE, but in the 360 Rapid browser it is always above the text. I hope experts can help_html/css_WEB-ITnose

When setting the background of

, it works fine under IE, but in the 360 Rapid browser it is always above the text. I hope experts can help_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

设置

<div id="nav"><ul><li>a</li><li>a</li><li>a</li><li>a</li><ul></div>

#nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}

回复讨论(解决方案)

ul｛margin:0;padding:0;list-style-type:none;｝

同时建议你注意下你的 ul 闭合标签。

引用 3 楼 flyzq0525 的回复:

nav float了，要加clear，要不然就漂出去了。
在nav后添加：
一般浏览器:

<div style="clear:both;"></div>

#navParent{oveflow:hidden;zoom:1;/* ie7 */}

nav float了，要加clear，要不然就漂出去了。
在nav后添加：
一般浏览器:

XML/HTML code
?

1

引用 4 楼 emituofo 的回复:
引用 3 楼 flyzq0525 的回复:

引用 5 楼 flyzq0525 的回复:引用 4 楼 emituofo 的回复:
引用 3 楼 flyzq0525 的回复:

#nav ul li{list-style-type:none; float:left;}
你写的样式！⊙?⊙b汗

这个

把ul和li的样式贴出来

会不会是IE8和火狐对margin、padding的兼容性解析的差异造成的，
正在查资料求证中……

<style type="text/css">.nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}.nav ul{list-style:none;margin:0;padding:0;}.nav ul li{float:left;width:120px;height:30px;line-height:30px;margin:0;padding:0;border-right:2px solid #fff}</style><div id="nav" class="nav"><ul><li>a</li><li>a</li><li>a</li><li>a</li></ul></div>

把ul和li的样式贴出来

#nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}/* 此处width设置菜单条宽度 */#nav a{display:block;text-align:center;}#nav a:link{color:#fff;text-decoration:none;}#nav a:visited{color:#fff;text-decoration:none;}#nav a:hover{color:#fff;text-decoration:none;}#nav li{float:left;display:inline-block;padding-top:10px;height:18px; *height:22px;padding-bottom:5px;padding-left:10px;padding-right:10px;border-right:2px solid #fff;list-style-type:none;}/* 此处width设置一级菜单宽度 */#nav li a:hover{background:#b3ab79;}#nav li ul{margin:0px;list-style-type:none;text-align:left;left:-960em;width:220px;border:1px;position:absolute;}/* 此处设置子菜单的宽度后，子菜单换行 */#nav li ul li{font-size:12px;width:220px;background:#9FB079;height:10px;line-height:10px;border:0px}/* 此处改子菜单的背景色、宽度、字体大小等 */#nav li ul a{display:block;width:220px;text-align:left;padding-left:6px;}#nav li ul a:link{color:#fff;text-decoration:none;}#nav li ul a:visited{color:#fff;text-decoration:none;}#nav li ul a:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;height:20px;background:#C00;}#nav li:hover ul{left:auto;}#nav li.sfhover ul{left:auto;}#content{clear:left;}

是为了清除浮动，只是写这么多是为了浏览器的兼容性，

.class{overflow:hidden;}

引用 12 楼 zhang_7150 的回复:把ul和li的样式贴出来

CSS code?12345678910111213141516#nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}/* 此处width设置菜单条……

li是ul的子元素，你的写法有问题，而且重复定义太多，不推荐使用id选择器，id一般用来唯一标志一个元素用的。
你可以试下我14楼的回复，我测试没问题。

感谢楼上的几位热心朋友鼎力相助，问题基本解决，我现在小结如下，也许对和我一样的初学者有帮助：

1、 id="nav"不应该加在div上，而是直接加在外层ul上，同时，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>Like</title><meta name="keywords" content="LikeCell,"/><meta name="description" content=""/><script type="text/javascript">function menuFix(){  var sfEls = document.getElementById("nav").getElementsByTagName("li");     for(var i=0;i<sfEls.length;i++){    sfEls[i].onmouseover=function(){      this.className+=(this.className.length>0 ? " ":"") + "sfhover";      if(window.event){         var ul = this.getElementsByTagName("ul")[0];         if(ul) ul.style.left = "auto";      }    }     sfEls[i].onMouseDown=function(){         this.className+=(this.className.length>0 ? " ":"") + "sfhover";       }    sfEls[i].onMouseUp=function(){         this.className+=(this.className.length>0 ? " ":"") + "sfhover";       }    sfEls[i].onmouseout=function(){      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");      if(window.event){         var to = event.toElement;         var ul = this.getElementsByTagName("ul")[0];         if(ul) if(!ul.contains(to)) ul.style.left = "-999em";      }    }  }  }window.onload = menuFix;</script><style type="text/css"> @charset "utf-8";body{text-align:justify;text-justify:newspaper;font-size:12px;color:#000;font-family:"Arial",Times New Roman,Georgia,Serif,Courier New,Courier,monospace;padding:0px;margin:0px auto 0px auto;}/* 主区域 */.wrap{padding:0px 5px;width:990px;margin:0px auto;background:#B9EEFF;}/* 菜单 */#navParent{overflow:hidden;zoom:1;background:#319CE2;}/* ie */#nav{float:left;font-size:14px;font-weight:bold;}/* 此处width设置菜单条宽度*width:980px;width:950px; */#nav a{display:block;text-align:center;}#nav a:link{color:#fff;text-decoration:none;}#nav a:visited{color:#fff;text-decoration:none;}#nav a:hover{color:#fff;text-decoration:none;}#nav li{float:left;padding:5px 15px;border-right:2px solid #fff;list-style-type:none;}/* 此处width设置一级菜单宽度 */#nav li a:hover{background:#b3ab79;}#nav li ul{margin:0px;list-style-type:none;text-align:left;left:-900em;width:220px;border:1px;position:absolute;}/* 此处设置子菜单的宽度后，子菜单换行 */#nav li ul li{font-size:12px;padding:5px;background:#9FB079;height:10px;border-bottom:1px white solid;}/* 此处改子菜单的背景色、宽度、字体大小等 */#nav li ul a{display:block;width:220px;text-align:left;padding-left:6px;}#nav li ul a:link{color:#fff;text-decoration:none;}#nav li ul a:visited{color:#fff;text-decoration:none;}#nav li ul a:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;height:20px;background:#C00;}#nav li:hover ul{left:auto;}#nav li.sfhover ul{left:auto;}</style> </head><body><div class="wrap">	<!--菜单-->	<div id="navParent">		<ul id="nav">			<li><a href="/" title="">首页</a></li>			<li><a href="#" title="">菜单二</a>				<ul>					<li><a href='#' title=''>子菜单1</a></li>					<li><a href='#' title=''>子菜单2</a></li>					<li><a href='#' title=''>子菜单3</a></li>				</ul>			</li>			<li><a href="#" title="">菜单三</a></li>			<li><a href="#" title="">菜单四</a></li>			<li><a href="#" title="">菜单五</a></li>			<li><a href="#" title="">菜单六</a></li>			<li><a href="#" title="">菜单七</a></li>			<li><a href="#" title="">菜单八</a></li>		</ul>	</div>	<div style="clear:both;"> </div></div></body></html>

今天正好在网上找到一个很不错的下拉菜单，完全是用css实现的，不用js，很不错，我稍微加以修改，在IE8、FF、谷歌、360等浏览器下都没问题，但是不知道是哪里的问题，在IE6下，没有下拉菜单效果，望高手加以改进：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>一个很不错的下拉导航菜单</title><style type="text/css"><!--#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}#navParent ul a{color:#ffffff;font-size:12px;}        #navParent li {float: left;width: 120px;border-right:2px solid #fff;}#navParent li ul {display: none;}#navParent li ul li{width:230px;text-align:left;}#navParent li:hover ul, li.over ul {display: block;}#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}#navParent ul li a:hover{background-color:#076bb9;}--></style></head><body><div id="navParent"><ul>  <li><a href="">Computers</a>    <ul>      <li><a href="">Computer Parts</a></li>      <li><a href="">USB Flash Memory</a></li>      <li><a href="">Batteries</a></li>      <li><a href="">USB data cable</a></li>	  <li><a href="">Computer Hardware</a></li>	  <li><a href="">Earphone</a></li>	  <li><a href="">Remote Storage</a></li>	</ul>	</li>  <li><a href="">Electronics </a>    <ul>      <li><a href="">GPS</a></li>	        <li><a href="">Bluetooth Carkits</a></li>      <li><a href="">Cell phones</a></li>      <li><a href="">MP3/MP4</a></li>	  <li><a href="">Digital Cameras</a></li>  	</ul>	</li>		<li><a href="">Toys</a>    <ul>      <li><a href="">Games</a></li>      <li><a href="">Remote Control Toys</a></li>      <li><a href="">Toys by Ages</a></li>     </ul>	</li>			<li><a href="">Cameras</a>    <ul>      <li><a href="">Digital Cameras</a></li>      <li><a href="">Camcorders</a></li>      <li><a href="">Batteries</a></li>      <li><a href="">Memory Cards</a></li>  	</ul>	</li>			<li><a href="">CellPhones </a>    <ul>      <li><a href="">Free Cellphones with Plans</a></li>      <li><a href="">Refurbished cellphones</a></li>      <li><a href="">Prepaid Refills</a></li>      <li><a href="">Free Ringtones</a></li>	  <li><a href="">Cellphone Accessories</a></li>  	</ul>	</li>		<li><a href="">Batteries </a>    <ul>      <li><a href="">Cellphone Batteries</a></li>	  <li><a href="">Laptop Batteries</a></li>      <li><a href="">Digital Camera Batteries</a></li>      <li><a href="">Camcorder Batteries</a></li>	  <li><a href="">PDA Batteries</a></li>	  <li><a href="">Ipod/MP3 Batteries</a></li>	  <li><a href="">Others</a></li>	</ul>	</li>		<li><a href="">Video Games</a>    <ul>      <li><a href="">Wii</a></li>	  <li><a href="">Xbox 360</a></li>      <li><a href="">PlayStation 2/PS 2</a></li>      <li><a href="">Nintendo DS</a></li>	  <li><a href="">PlayStation 3/PS 3</a></li>	  <li><a href="">PSP</a></li>	  <li><a href="">PC games</a></li>	   	  <li><a href="">Game Console</a></li>	  	  <li><a href="">Accessories</a></li>		</ul>	</li></ul></div></body></html>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Atom editor mac version download

The most popular open source editor

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),