我想离开我的Dropdown和父子菜单文本。我还希望我的标签文本始终是正确的。我怎么能这样做?
这是我的代码:
<!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*/
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 4px 27px;
/* 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: 25px 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 <font size="1"> ► </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 <font size="1"> ► </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"> ► </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 <font size="1"> ► </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 ">Services</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>
答案 0 :(得分:0)
这可能会有所帮助:
.sub-menu {
text-align: left;
}