如何在我的页面上显示我的导航栏菜单？

时间：2017-10-14 10:51:20

标签： html css

我如何在页面上显示导航栏菜单？ 我也想删除左右填充，plz操纵我的代码作为我的愿望。 我如何在我的页面上显示我的导航栏菜单？我如何在我的页面上显示我的导航栏菜单如何在我的页面上显示我的导航栏菜单？我如何在我的页面上显示我的导航栏菜单？我如何适合我的导航栏菜单在我的页面上？ 

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<style>
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/*             By www.Bloggermint.com            */



#nav {  position: relative;    /*position of navbar right and left*/
        left: auto;
    	float: left;
   	font: 12px calibri, Helvetica, Sans-serif;
    	border: 1px solid #121314;
    	border-top: 1px solid #2b2e30;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	overflow:visible;
	line-height:10px;       /* change the border height  of the menu*/
        left: -2%;
   

        
        
        
	
}

#nav ul {

    list-style:none;
	margin:0;
	padding:0;
    
	
}

#nav ul li {
	float:left;
}

#nav ul li a {
   	float: left;
	color:#d4d4d4;
    	padding: 5px 21.5px;  /* change the width of whole menu*/
	text-decoration: none;
    	background:#3C4042;
 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
	background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
        
        
       
	
}

#nav ul li a:hover,
#nav ul li:hover > a {
    	color:#FFF;   /* change tabs font hover color */
    	background:#3C4042;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
	background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
	background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
        
        

}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color:#FFF;        /*  change the drop down font color*/
  	background: #5C9ACD;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
	background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
	background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    	border-bottom: 1px solid rgba(0,0,0,0.6);
    	border-top: 1px solid #7BAED9;
    	text-shadow: 0 1px rgba(255, 255, 255, 0.3);
        
       
}



#nav li ul {
	overflow:visible;
    	background:#3C4042;
    	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    	background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	border-radius: 0 0 30px 30px;
    	-moz-border-radius: 0 0 10px 10px;
    	-webkit-border-radius: 0 0 10px 10px;
    	left: -999em;
    	margin: 29px 0 0;        /* change the position of drop down menu, up and down.*/
    	position: absolute;
        width: 200px;
    	z-index: 9999;
    	box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	border: 1px solid rgba(0, 0, 0, 0.5);
        
      
        
       
}

#nav li:hover ul {
    	left: auto;
}

#nav li ul a {
    	background: none;
    	border: 0 none;
    	margin-right: 0;
    	width: 198px;       /*  change the border drop down menu border size*/
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	border-bottom: 1px solid transparent;
    	border-top: 1px solid transparent;
        
        
}

#nav li li ul {
    	margin:-1px 0 0 197px;  /*change the parent drop down list position, Right, Left*/
    	-webkit-border-radius: 0 10px 10px 10px;
    	-moz-border-radius: 0 10px 10px 10px;
    	border-radius: 0 10px 10px 10px;
    	visibility:hidden;
      
}

#nav li li:hover > ul {
    visibility: visible;
   
}
#nav li:hover > ul {
    left: auto;
   
}





#nav ul ul li:last-child > a {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
     
       
}

#nav ul ul ul li:first-child > a {
	-moz-border-radius:0 10px 0 0;
	-webkit-border-radius:0 10px 0 0;
	border-radius:0 10px 0 0;
       
       
}

header {
  border-top: 0px solid gold !important;              /*move header pic up and down*/
  margin-top: -43px !important;
}


</style>

<header style="position: relative; top: 6px;">
<div id="nav">
<ul>
<li><a href="https://lighthouse786.blogspot.com/">Home</a></li>
<li><a href="#">Books</a>
<ul>  
     <li><a href="#">By Author &nbsp;&nbsp;&nbsp;<font size="1"> &#9658;  </font></a>
<ul>
     <li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ashfaq Ahmed</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Wasif Ali Wasif</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Abu Yahya</a></li>
</ul>
</li>

     <li><a href="https://lighthouse786.blogspot.com/p/poetry-books.html">Poetry Books &nbsp;&nbsp;&nbsp;<font size="1"> &#9658;  </font></a>
<ul>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Allama Iqbal</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mir Taqi Mir</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mirza Ghalib</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Faiz Ahmed Faiz</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ahmed Faraz</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mohsin Naqwi</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ibne Insha</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Parveen Shakir</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Bano Qudsia</a></li>
     
</ul>
</li>

     <li><a href="https://lighthouse786.blogspot.com/p/islamic-books.html">Islamic Books</a></li>

     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Knowledge Books</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Computer Books</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Programming Books</a></li>
     
</ul>
</li>

<li><a href="#">Authors & Scholars</a>
<ul>
	<li><a href="https://lighthouse786.blogspot.com/p/blog-page.html">Moulana Tariq Jamil</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din Shah</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/ghulam-muhammad-dard_29.html">Ghulam Muhammad Dard</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Something New</a></li>
        <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Our Vision</a></li>
	</ul>
</li>
	

<li><a href="#">Sofwares</a>
	<ul>
	<li><a href="https://lighthouse786.blogspot.com/p/softwares.html">Antivirus</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.2</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Registered Apps <font size="1">  &#9658; </font> </a>

		<ul>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.1</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.2</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.3 &nbsp;&nbsp;&nbsp; <font size="1"> &#9658;  </font></a>


<ul>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li>
</ul>






</li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.4</a></li>
		<li><a href=https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.5</a></li>

		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.6</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.7</a></li>
		</ul>
	</li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.4</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.5</a></li>
	</ul>

</li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Deep Things</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Contact Us</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">About Me</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">AlhamduLillah</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Who We Are</a></li>


</ul>

</div></header>


</!doctype>

2 个答案:

答案 0 :(得分：0)

你标题需要显示内嵌，而你不需要刚评论的左侧位置。

＆＃13;
＆＃13; 
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<style>
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/*             By www.Bloggermint.com            */

header{
  display:inline;
}
#nav {  position: relative;    /*position of navbar right and left*/
        left: auto;
    	float: left;
   	font: 12px calibri, Helvetica, Sans-serif;
    	border: 1px solid #121314;
    	border-top: 1px solid #2b2e30;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	overflow:visible;
	line-height:10px;      /* change the border height  of the menu*/
        /*left: -2%;*/
   

        
        
        
	
}

#nav ul {

    list-style:none;
	margin:0;
	padding:0;
    
	
}

#nav ul li {
	float:left;
}

#nav ul li a {
   	float: left;
	color:#d4d4d4;
    	padding: 5px 21.5px;  /* change the width of whole menu*/
	text-decoration: none;
    	background:#3C4042;
 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
	background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
        
        
       
	
}

#nav ul li a:hover,
#nav ul li:hover > a {
    	color:#FFF;   /* change tabs font hover color */
    	background:#3C4042;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
	background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
	background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
        
        

}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color:#FFF;        /*  change the drop down font color*/
  	background: #5C9ACD;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
	background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
	background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    	border-bottom: 1px solid rgba(0,0,0,0.6);
    	border-top: 1px solid #7BAED9;
    	text-shadow: 0 1px rgba(255, 255, 255, 0.3);
        
       
}



#nav li ul {
	overflow:visible;
    	background:#3C4042;
    	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    	background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	border-radius: 0 0 30px 30px;
    	-moz-border-radius: 0 0 10px 10px;
    	-webkit-border-radius: 0 0 10px 10px;
    	left: -999em;
    	margin: 19px 0 0;        /* change the position of drop down menu, up and down.*/
    	position: absolute;
        width: 200px;
    	z-index: 9999;
    	box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	border: 1px solid rgba(0, 0, 0, 0.5);
        
      
        
       
}

#nav li:hover ul {
    	left: auto;
}

#nav li ul a {
    	background: none;
    	border: 0 none;
    	margin-right: 0;
    	width: 157px;       /*  change the border drop down menu border size*/
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	border-bottom: 1px solid transparent;
    	border-top: 1px solid transparent;
        
        
}

#nav li li ul {
    	margin:-1px 0 0 197px;  /*change the parent drop down list position, Right, Left*/
    	-webkit-border-radius: 0 10px 10px 10px;
    	-moz-border-radius: 0 10px 10px 10px;
    	border-radius: 0 10px 10px 10px;
    	visibility:hidden;
      
}

#nav li li:hover > ul {
    visibility: visible;
   
}
#nav li:hover > ul {
    left: auto;
   
}





#nav ul ul li:last-child > a {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
     
       
}

#nav ul ul ul li:first-child > a {
	-moz-border-radius:0 10px 0 0;
	-webkit-border-radius:0 10px 0 0;
	border-radius:0 10px 0 0;
       
       
}

header {
  border-top: 0px solid gold !important;              /*move header pic up and down*/
  margin-top: -43px !important;
}


</style>

<header style="position: relative; top: 6px;">
<div id="nav">
<ul>
<li><a href="https://lighthouse786.blogspot.com/">Home</a></li>
<li><a href="#">Books</a>
<ul>  
     <li><a href="#">By Author &nbsp;&nbsp;&nbsp;<font size="1"> &#9658;  </font></a>
<ul>
     <li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ashfaq Ahmed</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Wasif Ali Wasif</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Abu Yahya</a></li>
</ul>
</li>

     <li><a href="https://lighthouse786.blogspot.com/p/poetry-books.html">Poetry Books &nbsp;&nbsp;&nbsp;<font size="1"> &#9658;  </font></a>
<ul>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Allama Iqbal</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mir Taqi Mir</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mirza Ghalib</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Faiz Ahmed Faiz</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ahmed Faraz</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mohsin Naqwi</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ibne Insha</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Parveen Shakir</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Bano Qudsia</a></li>
     
</ul>
</li>

     <li><a href="https://lighthouse786.blogspot.com/p/islamic-books.html">Islamic Books</a></li>

     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Knowledge Books</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Computer Books</a></li>
     <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Programming Books</a></li>
     
</ul>
</li>

<li><a href="#">Authors & Scholars</a>
<ul>
	<li><a href="https://lighthouse786.blogspot.com/p/blog-page.html">Moulana Tariq Jamil</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din Shah</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/ghulam-muhammad-dard_29.html">Ghulam Muhammad Dard</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Something New</a></li>
        <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Our Vision</a></li>
	</ul>
</li>
	

<li><a href="#">Sofwares</a>
	<ul>
	<li><a href="https://lighthouse786.blogspot.com/p/softwares.html">Antivirus</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.2</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Registered Apps <font size="1">  &#9658; </font> </a>

		<ul>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.1</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.2</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.3 &nbsp;&nbsp;&nbsp; <font size="1"> &#9658;  </font></a>


<ul>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li>
</ul>






</li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.4</a></li>
		<li><a href=https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.5</a></li>

		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.6</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.7</a></li>
		</ul>
	</li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.4</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.5</a></li>
	</ul>

</li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Deep Things</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Contact Us</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">About Me</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">AlhamduLillah</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Who We Are</a></li>


</ul>

</div></header>


</!doctype>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

  

首先正确编写html，你错过了开始和关闭   <html>您正在关闭<!doctype>

让我们来看看CSS，为什么你在减号中添加了保证金，这就是让你的导航在负面排在首位。最后一个在float:left上将display:block更改为 ul li a {}

{margin: 0};这将重置所有html标签的边距。 

/* Pure CSS3 Multi Level Drop Down Navigation Menu */


/*             By www.Bloggermint.com            */

#nav {
  position: relative;
  /*position of navbar right and left*/
  left: auto;
  float: left;
  font: 12px calibri, Helvetica, Sans-serif;
  border: 1px solid #121314;
  border-top: 1px solid #2b2e30;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: visible;
  line-height: 10px;
  /* change the border height  of the menu*/
  left: -2%;
}

#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav ul li {
  float: left;
}

#nav ul li a {
  display: block;
  color: #d4d4d4;
  padding: 5px 21.5px;
  /* change the width of whole menu*/
  text-decoration: none;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
  background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
  background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover,
#nav ul li:hover>a {
  color: #FFF;
  /* change tabs font hover color */
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover>a {
  color: #FFF;
  /*  change the drop down font color*/
  background: #5C9ACD;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
  background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
  background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-top: 1px solid #7BAED9;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li ul {
  overflow: visible;
  background: #3C4042;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  border-radius: 0 0 30px 30px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  left: -999em;
  margin: 29px 0 0;
  /* change the position of drop down menu, up and down.*/
  position: absolute;
  width: 200px;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
  left: auto;
}

#nav li ul a {
  background: none;
  border: 0 none;
  margin-right: 0;
  width: 198px;
  /*  change the border drop down menu border size*/
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
}

#nav li li ul {
  margin: -1px 0 0 197px;
  /*change the parent drop down list position, Right, Left*/
  -webkit-border-radius: 0 10px 10px 10px;
  -moz-border-radius: 0 10px 10px 10px;
  border-radius: 0 10px 10px 10px;
  visibility: hidden;
}

#nav li li:hover>ul {
  visibility: visible;
}

#nav li:hover>ul {
  left: auto;
}

#nav ul ul li:last-child>a {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

#nav ul ul ul li:first-child>a {
  -moz-border-radius: 0 10px 0 0;
  -webkit-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
}

* {
  margin: 0
}

border-top: 0px solid gold !important;

/*move header pic up and down*/


}
* {
  margin: 0
}
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

  <header>
    <div id="nav">
      <ul>
        <li><a href="https://lighthouse786.blogspot.com/">Home</a></li>
        <li><a href="#">Books</a>
          <ul>
            <li><a href="#">By Author &nbsp;&nbsp;&nbsp;<font size="1"> &#9658;  </font></a>
              <ul>
                <li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ashfaq Ahmed</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Wasif Ali Wasif</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Abu Yahya</a></li>
              </ul>
            </li>

            <li><a href="https://lighthouse786.blogspot.com/p/poetry-books.html">Poetry Books &nbsp;&nbsp;&nbsp;<font size="1"> &#9658;  </font></a>
              <ul>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Allama Iqbal</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mir Taqi Mir</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mirza Ghalib</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Faiz Ahmed Faiz</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ahmed Faraz</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mohsin Naqwi</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ibne Insha</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Parveen Shakir</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Bano Qudsia</a></li>

              </ul>
            </li>

            <li><a href="https://lighthouse786.blogspot.com/p/islamic-books.html">Islamic Books</a></li>

            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Knowledge Books</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Computer Books</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Programming Books</a></li>

          </ul>
        </li>

        <li><a href="#">Authors & Scholars</a>
          <ul>
            <li><a href="https://lighthouse786.blogspot.com/p/blog-page.html">Moulana Tariq Jamil</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din Shah</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/ghulam-muhammad-dard_29.html">Ghulam Muhammad Dard</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Something New</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Our Vision</a></li>
          </ul>
        </li>


        <li><a href="#">Sofwares</a>
          <ul>
            <li><a href="https://lighthouse786.blogspot.com/p/softwares.html">Antivirus</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.2</a></li>
            <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Registered Apps <font size="1">  &#9658; </font> </a>

              <ul>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.1</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.2</a></li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.3 &nbsp;&nbsp;&nbsp; <font size="1"> &#9658;  </font></a>


                  <ul>
                    <li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li>
                    <li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li>
                  </ul>






                </li>
                <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.4</a></li>
                <li>
                  <a href=https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.3.5</a></li>

		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.3.6</a></li>
		<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.3.7</a></li>
		</ul>
	</li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.4</a></li>
	<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.5</a></li>
	</ul>

</li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Deep Things</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Contact Us</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">About Me</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">AlhamduLillah</a></li>
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Who We Are</a></li>


</ul>

</div></header>


</html>

相关问题
最新问题