如何让我的下拉文字左对齐?

时间:2017-10-07 16:56:54

标签: html css

我想离开我的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 &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 ">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>

1 个答案:

答案 0 :(得分:0)

这可能会有所帮助:

.sub-menu { 
  text-align: left; 
}