The same code, why are the results different? ? ? _html/css

Table of Contents

Reply to discussion (solution)

Home

Web Front-end

HTML Tutorial

The same code, why are the results different? ? ? _html/css_WEB-ITnose

Jun 24, 2016 pm 12:24 PM

tomcat HTML jsp

I wrote a navigation menu with css. With the same code, I deployed the file to the tomcat server and opened it with a browser. The result is

I am in Open the desktop directly: the result is:

I don’t know the reason, that is, the result displayed in the submenu in Figure 1 does not correspond to the main menu. Figure 2 is correct. Please enlighten me.

The original code is as follows:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;纯CSS实现的多级下拉导航菜单5，可设定下拉菜单宽度mobanwang.com&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;/* 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 &lt;b&gt; 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 &lt;ul&gt;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/* ----------------------------------------------------------------------------	*/&lt;/style&gt; &lt;/head&gt;&lt;body&gt;&lt;div id=&quot;backgroundHolder&quot;&gt;  &lt;ul class=&quot;nav&quot;&gt;    &lt;li class=&quot;nav1 drop&quot;&gt;&lt;a class=&quot;main&quot; href=&quot;#url&quot;&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;    &lt;li class=&quot;nav2 drop&quot;&gt;&lt;a class=&quot;main down&quot; href=&quot;#url&quot;&gt;&lt;b&gt;Equipment&lt;/b&gt;&lt;/a&gt;    &lt;/li&gt;    &lt;li class=&quot;nav3 drop&quot;&gt;&lt;a class=&quot;main down&quot; href=&quot;#url&quot;&gt;&lt;b&gt;3&lt;/b&gt;&lt;/a&gt;      &lt;ul&gt;        &lt;li class=&quot;fly&quot;&gt;&lt;a class=&quot;main&quot; href=&quot;#url&quot;&gt;&lt;b&gt;3.1&lt;/b&gt;&lt;/a&gt;          &lt;ul&gt;            &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.11&lt;/b&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.12&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.13&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.14&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.15&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.16&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;          &lt;/ul&gt;        &lt;/li&gt;         &lt;li class=&quot;fly&quot;&gt;&lt;a class=&quot;main&quot; href=&quot;#url&quot;&gt;&lt;b&gt;3.2&lt;/b&gt;&lt;/a&gt;           &lt;ul&gt;                &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.21&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.22&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.23&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.24&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#url&quot;&gt;&lt;b&gt;3.25&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;          &lt;/ul&gt;        &lt;/li&gt;      &lt;/ul&gt;    &lt;/li&gt;    &lt;li class=&quot;nav4 drop&quot;&gt;&lt;a class=&quot;main down&quot; href=&quot;#url&quot;&gt;&lt;b&gt;Outlets&lt;/b&gt;&lt;/a&gt;    &lt;/li&gt;    &lt;li class=&quot;nav5 drop&quot;&gt;&lt;a class=&quot;main&quot; href=&quot;#url&quot;&gt;&lt;b&gt;Privacy Policy&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

Reply to discussion (solution)

Copy it and check it out, no problem, what are you using? Browser problem?

I am using ie8, built a project on myeclipse, and set up an SSH environment, then copied the html file to the built project, started the server, opened it from the browser, and it appeared Error as above

Copy it and check it out, no problem. What browser are you using?

Thank you, it has been solved. It was a code problem, the writing was too messy

Statement of this Website

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