Home  >  Article  >  Web Front-end  >  The horizontal navigation of the website cannot be displayed_html/css_WEB-ITnose

The horizontal navigation of the website cannot be displayed_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:14:561806browse

I recently helped a friend modify the website. Since I am new to div css, I don’t know why the navigation title is not displayed after adding it. It seems to be covered.
How to modify the navigation menu attributes and values ​​in the file css.css.
I hope my friends can give me some tips, I will post the code later~~


Reply to the discussion (solution)

Maybe the outer layer of the navigation has a width set limit. And added overflow:hidden;

1. The content mentioned above exceeds the width of the outer layer and is hidden.
2. The newly added one is no longer on the same line as the original one. It is too high and hidden
3. The newly added content is blocked by other elements

Use Firebug to take a look and you will know

I recently helped a friend modify the website. Since I am new to div css, I don’t know why the navigation title is not displayed after adding it. It seems to be covered.
How to modify the navigation menu attributes and values ​​in the file css.css.
I hope my friends can give me some tips. I will post the code later~~
The css code is as follows:
body{
font-size:13px;
margin:0px;
padding:0px;
text-align:center;
color:#000;
background:#000;
font-family:Tahoma, Verdana; }

a:link,a:visited{color:#000;text-decoration:none;}
a:hover{color:red;text-decoration: none;}

div,img,ul, ol,dl,dt,dd {
border:0;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6 {
font-size:12px;
margin:0;
padding:0;
}
/*- --Clear floats---*/
.clear {
clear:both;
height:0;
overflow:hidden;
}

.container{
width: 1050px;
margin:0 auto;
background-color: #CCC;
}

.header{
width: 1050px;
height: 197px ;
background-color: #00F;
}
.hdtop{
width: 1050px;
height: 163px;
background: url(eshow/home_top.gif);
}
.topdh{
width: 1050px;
height: 40px;
background-color: #00F;
background-image: url(eshow/home_dh.gif);
}
.topdh li{
float:left;
margin-left:8px;
margin-top:10px;
list-style:none;
display:table -cell;
padding:0px 5px 0px 5px;}
.topdh a:link,.topdh a:visited{color:#000;text-decoration:none; font-weight:bold; font-size: 13px;}
.topdh a:hover{color:#006600;text-decoration: none; font-weight:bold; font-size:13px;}
.list{
width:auto;
height:auto;
margin: 5px auto;
background-color: #666;
}
.ad000{width:790px; height:74px; margin-bottom:5px;}
.ls_z{
width: 250px;
height:806px;
float: left;
display: inline;
background: #F2F2F2;
}
.ls_y {
width: auto;
height: auto;
margin-left: 5px;
float: left;
display: inline;
}
.ls_dz{
width: 238px;
height:450px;
border:1px solid #DFDFDF;
background-color: #666;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
.ls_dz h1,.ls_dz h2,.ls_dz h3{text-align:left; height:25px; line-height :1.8em; padding-left:10px; border-bottom:1px #dfdfdf solid;}
.ls_dz h3{ background:url(eshow/links.gif); padding-left:35px;}
.ls_ad {
width: auto;
height: 30px;
background-color: #999;
}
.ls_fc{
border:1px solid #DFDFDF;
width: auto;
height: 360px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
td{font-size:12px ;}
.lswz{
width: 300px;
height: 350px;
margin-top: 2px;
float: left;
}
.lswz h4,. lswz h1{ height:25px;
width:265px;
text-align:left;
line-height:1.8em;
padding-left:35px;
background:url(eshow /dd_bg.gif);
}
.lswz ul{ text-align:left; padding:4px; border-top:1px solid #DFDFDF; margin-top:2px}
.lswz a{border -bottom:1px dashed #DFDFDF;}
.books{
width: 175px;
height: 350px;
margin-top: 2px;
}
.books h2{
height:25px;
width:535px;
text-align:left;
padding-left:35px;
line-height:1.8em;
background:url(eshow/ books.gif);
}
.books ul{ text-align:left;}

.footer{
width: 1050px;
height: 100px;
background -color: #CCC;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
/**********************************************/
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
/*第一种形式*/
#tabs0,#tabs1 {
 height: 260px;
 width: 238px;
 border: 1px solid #DFDFDF;
 background:#fff;
 margin-top:5px;
}
.menu0,.menu1{
 width: 238px;
 border-bottom: 1px solid #DFDFDF;
}
.menu0 li,.menu1 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:80px;
 text-align: center;
 cursor:pointer;
 background: #FFFFff;
 border-right: 1px solid #DFDFDF;
}
.menu0 li.hover,.menu1 li.hover{
 background: url(eshow/xuanbg.jpg);
 color:#fff;
}
#main0 a,#main1 a{
   border-bottom:1px #d4d4d4 dashed;
}
#main0 ul,#main1 ul{
 display: none;
 text-align:left;
 line-height:1.4em;
}
#main0 ul.block,#main1 ul.block{
 display: block;
}
/******************************************/
.biaoti{width:100%; height:auto;margin-top:5px; float:left}
.biaoti h2{height:25px; background:#F0F0F0; padding-top:5px; font-size:13px;}
.container .footer ul li div {
font-family: Georgia, Times New Roman, Times, serif;
}

HTML 代码呢

HTML 代码呢

HTML 代码呢

引用楼主  的回复:
最近帮朋友修改网站,因为是初学div+css,所以不知道添加导航标题以后为什么会不显示出来,好像被遮盖了一样。
在文件css.css中应该怎么样修改导航菜单属性和值。
希望会的朋友能给我一些提示,代码我随后就贴上~~


css 的代码如下 :
body{
   font-size:13px;
margin:0px;
padding:0px;
text……
html  代码:
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7XXX数字图书馆6e916e0f7d1e588d4f442bf645aedb2f
f1f6da402f61953b850062294fe99965
3f1c4e4b6b16bbbd69b2ee476dc4f83a
ecde454079e4785a080cebe6201f00ba
2cacc6d41bbb37262a98f745aa00fbf0
b064ea1963483f6bff4d1dc648487091
46d5fe1c7617e3914f214aaf043f4ccf
body,td,th {
color: #F00;
}
a {
font-weight: bold;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a3d26fddad773596419d66c0738d6f77
319f201be12f52d9c51063bceb1bd1b7
52b9cd719c304868a6d7a0e8aa867410
de67c92557c314997a7abf205540804d16b28748ea4df4d9c2150843fecfba68
b92839d12b4c89a0995446e7f2033255 
c3492c6e58c3ed29231c72a3b299c1ca
  56108a925655d631a2d5442034db9d1f2ae9efde0e35582bd04149394d734b9c5db79b134e9f6b82c0b36e0489ee08ed
929d1f5ca49e04fdcb27f9465b944689
f6e2ccd7c3f1a227387db4db6e199fd6
25edfb22a4f469ecb59f1190150159c636cdeaf2a725eb63bc1642a9a923fa8d本站首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64b2a7d295ea7763d49e109c678a5952c 本馆概况5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6caafba658c27e60c6c06d0492d338165 读者服务指南5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c61dcb78587b128d122b745f139700275f 少儿天地5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c634d46313e892d6c6b34f01c11804aa78农家书屋5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f36d947cdb8c03e4304b96ba4a1b58f4数字资源5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c668ae8eb077793b14c43e56be75c7c324 读者留言5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e6467b98f425c9f1e8a2d4a59d4e43b2 共享工程5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e6467b98f425c9f1e8a2d4a59d4e43b2 安宁旅游5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fbb09439b0ce721210da04d6140ab45b 网上图书馆5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c62ddf131cc86557f8799019feeed902c5 省图书馆5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
a969ae8a26f8ca427f688eeca321993916b28748ea4df4d9c2150843fecfba68 清除浮动-->
53641fc92cf72d9f935f97e9f6f678a5

40e430eb91a897302b39421eda489187
7ffc275849a11cec9fa4a2fd14e0e053
 56bfe94a4b185076434c71ce746cd230
  f9cb828ffd505508e0e26a6f8ff605ca读者服务bed06894275b65c1ab86501b08a632eb
  4beafa96d65d5980cf64393f6a59df82读者指南bed06894275b65c1ab86501b08a632eb
 929d1f5ca49e04fdcb27f9465b944689
 d47e78cbc5a1f96af6d41ecb824d2925
  906514e3e28fc8c681c1b2b2a50b1fe2
  25edfb22a4f469ecb59f1190150159c6ac4b55ed401551f4e409aacfd0bab6262cacc6d41bbb37262a98f745aa00fbf0bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689
  ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6
d34350f5355e68ffdfd94ed8ff52fbd82cacc6d41bbb37262a98f745aa00fbf0  bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689
 16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

2f58afc597d576c119aba33755cadc53
 5903a7aec77a2800061586a2c621b92c
  eb81e2559674ffa4e166a34c8a69cdfe新书通报bed06894275b65c1ab86501b08a632eb
  dfac76635ec7784234acf36061f27d69新书推荐bed06894275b65c1ab86501b08a632eb
 929d1f5ca49e04fdcb27f9465b944689
 bc919a9230526abd5ec95c369b834a34
  906514e3e28fc8c681c1b2b2a50b1fe225edfb22a4f469ecb59f1190150159c6
  a9f15c7462bc1e6014ab3208c512c1d52cacc6d41bbb37262a98f745aa00fbf0 
  bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689
  ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6
    186c74f22ace38a19286d0fc6a2041f42cacc6d41bbb37262a98f745aa00fbf0 
  bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689
 16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
2b1bacead42658d4868cd9b5178ea3ab
 5903a7aec77a2800061586a2c621b92c
  eb81e2559674ffa4e166a34c8a69cdfe安宁旅游bed06894275b65c1ab86501b08a632eb
  dfac76635ec7784234acf36061f27d69安宁美食bed06894275b65c1ab86501b08a632eb
 929d1f5ca49e04fdcb27f9465b944689
 bc919a9230526abd5ec95c369b834a34
  906514e3e28fc8c681c1b2b2a50b1fe225edfb22a4f469ecb59f1190150159c6
  a9f15c7462bc1e6014ab3208c512c1d52cacc6d41bbb37262a98f745aa00fbf0 
  bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689
  ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6
    186c74f22ace38a19286d0fc6a2041f42cacc6d41bbb37262a98f745aa00fbf0 
  bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689
 16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68


a321a1421e19f4b19ca73bcb9631af20
684271ed9684bde649abda8831d4d355友情连接39528cedfa926ea0c01e69ef5b2ea9b0
ff6d136ddc5fdfeffaf53ff6ee95f185
a061f7fe6dbdbce6be10868f4f5dee565832b4b9558651f206456963b54274762cacc6d41bbb37262a98f745aa00fbf0
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
d263de5642134034e4d386987880a7d0
7c32bf314086bd4b3d3395d24e8948ed
0154ae5d243fa458c72faf2dd433b80e56c3ac82c368acb492c4a526f4fc2032929d1f5ca49e04fdcb27f9465b944689
06fcc8aff46320ca7a64996158833533
25edfb22a4f469ecb59f1190150159c681b1542d2405a30cd40ff632178c135622ac409f706bb9fc5fba2b174b2cb60c2cacc6d41bbb37262a98f745aa00fbf07204e33a7a23f6efcc788532e245c31b7204e33a7a23f6efcc788532e245c31bbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

34ceb46cd248eac841d31d228ea4672e   2d8644617061b36f882146a80f08b708
    00ea61768d85f431618fae7af21cc12c
    7471d6cf965f928bb8d0d74296041184
2aa8527ac5d284cc49e5bcba351545dd
    
ad760e14ade0bb162c827b5868b98cb0

    269565d3dd53d04b8f487c1d1a18b8ee
    bbd913e85c3dcd12f4f2ae170b93d372
    563a0643426921c25bafa08ee9e73d904dd31068bf220ff9da7a2b5fbd47a26a
  eb50c9ec568c9b96871b9e94a1ff3fd116b28748ea4df4d9c2150843fecfba68
23d8735c88250086a49f34561483b47f
3f7b3decd2dcafb07b84d2d3985d9f40本馆概况0f6dfd1e3624ce5465eb402e300e01ae
ff6d136ddc5fdfeffaf53ff6ee95f185
00cd940156e50ae7dd914203ea2c8a99f06abb96c14d6cbfd76b099fe2d993f42cacc6d41bbb37262a98f745aa00fbf0bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
fdd14fe93e4d0530958120cf705ce0d1
4a249f0d628e2318394fd9b75b4636b1电子资源473f0a7621bec819994bb5020d29372a
ff6d136ddc5fdfeffaf53ff6ee95f185
00cd940156e50ae7dd914203ea2c8a99372051f84869b46009df6719f758e9852cacc6d41bbb37262a98f745aa00fbf0bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
f4a4e1cc93d4d3545844a3d32e68a0d1
c1a436a314ed609750bd7c7d319db4da站内留言2e9b454fa8428549ca2e64dfac4625cd
5f50fcac6883b25dacb215a10d99f7b65e7a00c40ccc810a4731e333b3c0a5552cacc6d41bbb37262a98f745aa00fbf016b28748ea4df4d9c2150843fecfba68
b53e3e1794550a45b2ed09d09b2a42b816b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
b290447e7000d86b8a773a5f533d586516b28748ea4df4d9c2150843fecfba68 db365d92ad2d6d1bab16c0b1abf00d66

8142608b3a8958638ce57b53e2c86e7d
ff6d136ddc5fdfeffaf53ff6ee95f185
dbee4f52dda9925acc59d7e6ea919db4
  be36754878d1c04af1a09c763c335e2c 图书馆工作人员  ac8e1b361b4d192fb14c3d83f9a410de[管理入口]5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6
  be36754878d1c04af1a09c763c335e2cCopyright 2012 图书馆版权所有16b28748ea4df4d9c2150843fecfba68
bed06894275b65c1ab86501b08a632eb 
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
b290447e7000d86b8a773a5f533d586516b28748ea4df4d9c2150843fecfba68 db365d92ad2d6d1bab16c0b1abf00d66

319f201be12f52d9c51063bceb1bd1b7
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

<ul style="float:left; width:680px;"><li><a href="/index.asp">本站首页</a></li>

The width of ul here should be increased according to how many li you have. It is not static, for example, a li The width is 60px. Then every time you add a li, the 680 here will increase the width accordingly. Note that I am just giving an example of 60px. The specific width depends on the character width of 18px

Thank you, the problem has been successfully solved. But can I ask for advice again? After the menu title is modified. Why does it change to the original menu title style when I click on the link? I sincerely ask for advice. I have also looked for information, but I can’t find an entry point...

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