一样的代码，运行结果为什么不同呢？？？_html/css_WEB-ITnose
tomcat HTML jsp
用css写了一个导航菜单，同样的代码，我把文件部署到tomcat服务器上，用浏览器打开结果为我在桌面直接打开：结果为：
不知道什么原因，也就是图一中子菜单显示的结果与主菜单不对应，图二是正确的，请大神指教。
原代码如下：
<!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=utf-8" /><title>纯CSS实现的多级下拉导航菜单5，可设定下拉菜单宽度mobanwang.com</title><style type="text/css">/* for this demo only */#backgroundHolder { width:750px; height:490px; padding-top:10px; background:url(ulmulti5/pic.jpg); margin:0 auto; text-align:center; }/* ---------------------------------------------------------------------------- *//* default styling */.nav, .nav ul { list-style-type:none; margin:0; padding:0; }.nav a { text-decoration:none; }.nav { font-family: arial, sans-serif; font-size:12px; width:460px; margin:0 auto; text-align:left; }/* style the links *//* needs a background for IE6 - can be a color or a transparent gif */.nav a { background:url(trans.gif); filter: alpha(opacity=90); opacity:0.9; }/* style the <b> element so that is does not affect the size of the link */.nav a b { color:#fff; font-weight:normal; display:block; padding:5px 10px; margin-right:1px; }.nav a:hover b { color:#000; cursor:pointer; border-left:2px solid #eee; }.nav .fly .main b { background: transparent url(ulmulti5/arrow.gif) no-repeat right 9px; }.nav .down b { background: transparent url(ulmulti5/arrow2.gif) no-repeat right 11px; }/* for the offset left dropdown and flyout */.nav .nav4 ul b { text-align:right; }.nav .nav4 ul .main b { background: transparent url(ulmulti5/arrow3.gif) no-repeat left 9px; text-align:right; }.nav .nav4 ul a:hover b { border-left:0; border-right:2px solid #eee; }/* HEIGHT */.nav ul ul { top:-25px; } /* position the top of the flyout sub menus */.nav ul ul.two { top:-40px; } /* position the top of the flyout sub menus *//* WIDTH change this WITH CARE to suit your requirements */ /* FOR NAV1 */.nav1 { width:80px; }.nav1 a { width:80px; }.nav1 a b { background-color:#764; }/* FOR NAV2 */.nav2, .nav2 a { width:100px; }.nav .nav2 a b, .nav .nav2 .fly a b { background-color:#887; }.nav2 ul li { max-width:100px; }.nav2 ul a { width:130px; }.nav2 ul ul { left:130px; }.nav2 a { margin-right:-99px; }.nav2 ul a { margin-right:-129px; }/* FOR NAV3 */.nav3, .nav3 a { width:100px; }.nav .nav3 a b, .nav .nav3 .fly a b { background-color:#775; }.nav3 ul li { max-width:100px; }.nav3 ul a { width:120px; }.nav3 ul ul { left:120px; }.nav3 a { margin-right:-99px; }.nav3 ul a { margin-right:-119px; }/* FOR NAV3 */.nav4, .nav4 a { width:80px; }.nav .nav4 a b, .nav .nav4 .fly a b { background-color:#675; }.nav4 ul li { max-width:80px; }.nav4 ul a { width:110px; }.nav4 ul { left:-30px; } /* position the dropdown left */.nav4 ul ul { left:auto; right:110px; } /* position the flyouts left */.nav4 a { margin-right:-79px; }.nav4 ul a { margin-right:-109px; }/* FOR NAV5 */.nav5 { width:100px; }.nav5 a { width:100px; }.nav5 a b { background-color:#a54; margin-right:0; }/* ---------------------------------------------------------------------------- */ /* DO NOT CHANGE ANYTHING BELOW */.nav li { float:left; } /* fixes several IE related bugs, and allows for clearing */.nav ul { float:left; position:relative; z-index:20; } /* necessary for float drop and to stack the <ul>s */.nav ul li { clear:left; } /* must clear the floated list item inside sublist */.nav a { position:relative; display:block; } /* needs to have a position, to be above the rest */.nav a.main { float:left; /* necessary for float drop */ margin-top:10000px; } /* bring the top level links back into view */.nav .drop, .nav .fly { margin-top:-10000px; } /* hide the sub links and their containers, opera has low upper limits */.nav ul { margin-bottom:-5000px; } /* avoid any interaction between the subs, can be any large size *//* The bit that does ALL the work to bring the sub menus into view */.nav a:hover, .nav a:focus, .nav a:active { margin-right:0; z-index:10; outline:0; }.nav a:hover b, .nav a:focus b, .nav a:active b { color:#000; cursor:pointer; border-left:2px solid #eee; }.nav .nav4 ul a:hover b, .nav .nav4 ul a:focus b, .nav .nav4 ul a:active b { border-left:0; border-right:2px solid #eee; }.nav2 ul a:hover, .nav2 ul a:focus, .nav2 ul a:active { margin-right:-30px; z-index:10; outline:0; }.nav3 ul a:hover, .nav3 ul a:focus, .nav3 ul a:active { margin-right:-20px; z-index:10; outline:0; }.nav4 ul a:hover, .nav4 ul a:focus, .nav4 ul a:active { margin-right:-30px; z-index:10; outline:0; }/* OPERA fix */.nav ul:hover, .nav ul ul:hover { clear:left; } /* to stop int/* ---------------------------------------------------------------------------- */</style> </head><body><div id="backgroundHolder"> <ul class="nav"> <li class="nav1 drop"><a class="main" href="#url"><b>Home</b></a></li> <li class="nav2 drop"><a class="main down" href="#url"><b>Equipment</b></a> </li> <li class="nav3 drop"><a class="main down" href="#url"><b>3</b></a> <ul> <li class="fly"><a class="main" href="#url"><b>3.1</b></a> <ul> <li><a href="#url"><b>3.11</b></a> </li> <li><a href="#url"><b>3.12</b></a></li> <li><a href="#url"><b>3.13</b></a></li> <li><a href="#url"><b>3.14</b></a></li> <li><a href="#url"><b>3.15</b></a></li> <li><a href="#url"><b>3.16</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>3.2</b></a> <ul> <li><a href="#url"><b>3.21</b></a></li> <li><a href="#url"><b>3.22</b></a></li> <li><a href="#url"><b>3.23</b></a></li> <li><a href="#url"><b>3.24</b></a></li> <li><a href="#url"><b>3.25</b></a></li> </ul> </li> </ul> </li> <li class="nav4 drop"><a class="main down" href="#url"><b>Outlets</b></a> </li> <li class="nav5 drop"><a class="main" href="#url"><b>Privacy Policy</b></a></li> </ul></div></body></html>回复讨论(解决方案)
复制下来看了下没问题啊，你是用什么浏览器出现的问题？
用的是ie8，在myeclipse上面建了个项目，并搭建了SSH环境，然后把html文件复制到建的项目下，启动服务器，从浏览器打开，就出现了如上错误
复制下来看了下没问题啊，你是用什么浏览器出现的问题？
谢谢你了，已经解决了，是代码的问题，写的太乱了
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
