如何在CSS中对齐导航下拉菜单？

时间：2015-02-04 04:56:44

标签： html css

我已经创建了简单的导航下拉菜单..但我仍然没有完成。

这是我的html和css工作jsfiddle：http://jsfiddle.net/rym2zku1/

当我悬停目录链接时，我需要显示如下显示： enter image description here

HTML：

<nav id="navWrap" role="navigation">
 <ul id="nav">
  <li class="nav-item first active">
    <a class="nav-item-link" href="/">Home</a>                
  </li>
  <li class="nav-item">
  <a class="nav-item-link" href="catalog.html">Catalog</a>  
  <ul>
  <li><a href="#">Data Listing</a></li>
  <li><a href="#">Web Scheduling</a></li>
  <li><a href="#">Google Maps Application</a></li>
  </ul>         
  </li>
<li class="nav-item">
<a class="nav-item-link" href="/blogs/news">Blog</a>                
 </li>
<li class="nav-item">
<a class="nav-item-link" href="/pages/about-us">About Us</a>                
</li>
</ul>
</nav>

任何帮助都将受到高度赞赏。提前谢谢

5 个答案:

答案 0 :(得分：2)

我在Here in JsFiddle

中写了我的代码 
<body>
    <div class="container">
      <h2>Dropdowns</h2>
      <p></p>
      <p></p>                                          
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
        </ul>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

答案 1 :(得分：1)

在CSS中添加此代码

Updated Code 

#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}
#nav li:hover ul {
    display: block;
}

答案 2 :(得分：1)

这是你在找什么？

Updated Screenshot

您只需将此css属性添加到下拉列表<ul>

即可 
  .nav-item  ul{
      padding:inherit;
      border: 1px solid black;
      text-align:left;
      border-radius:4px;
    }

这是fiddle。

干杯！

答案 3 :(得分：0)

＆＃13;
＆＃13; 
nav ul,nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
  .nav-item  ul{
      padding:0;
      border: 1px solid black;
      text-align:left;

    }
.nav-item  ul li{padding: 0;}
  .nav-item  ul li:hover{
      background-color:#d1d1d1;
    }
.nav-bar {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .nav-bar--left {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }

  .nav-bar--left .grid-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
}
#nav {
  position: relative;
  display: block;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
  white-space: nowrap;
}

.nav-bar--left #nav {
  margin: 1em 0 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #nav,.nav-bar--left #nav {
    width: 100%;
    white-space: normal;
    margin: 20px 0 10px;
    text-align: inherit;
  }
}

.nav-item {
  position: relative;
  display: inline-block;
  padding: 2px 30px;
}

@media screen and (max-width: 768px) {
  .nav-item {
    padding: 10px 20px;
  }
}

#nav>.nav-item {
  border-left: 1px solid #e8e8e8;
}

#nav>.nav-item.first {
  border-left: none;
  padding-left: 0;
}

@media screen and (max-width: 768px) {
  #nav>.nav-item {
    border: 0 none;
  }
}

.nav-item-link {
  display: inline-block;
  color: #211f1f;
  font-size: 14px;
  zoom: 1;
  *display: inline;
}

.nav-item-link:hover {
  color: #333;
}

.nav-item-link .nav-item.active .nav-item-link {
  color: #333333;
}

.sub-nav .sub-nav {
  display: none !important;
}
.supports-no-csstransforms .sub-nav {
  white-space: normal;
  width: 200px;
  margin-left: -100px;
}

.sub-nav:before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 47%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #211f1f;
  z-index: 40;
}


.sub-nav-item,#moreMenu--list .nav-item {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #211f1f;
}

.sub-nav-item.first,#moreMenu--list .nav-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sub-nav-item.last,#moreMenu--list .nav-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
  display: block;
  padding: 15px 20px;
  margin: 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #0b0a0a;
}

.sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
  border-top: none;
}

.sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
  color: #ffffff;
  border-top: 1px solid #0b0a0a;
  background-color: #0b0a0a;
}

.sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
  border-top: none;
}
#nav {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center
}
#nav a {
    text-decoration: none;
    color: #666;
    display: inline-block;
    padding: 10px;
    font-size: 13px;
}
#nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    width: 170px;
    border: 1px solid #ccc;
    display: none;
}

#nav li:hover ul {
    display: block;
}
＆＃13; 
 <nav id="navWrap" role="navigation">
                  <ul id="nav">
                     <li class="nav-item first active">
                        <a class="nav-item-link" href="/">Home</a>                
                     </li>
			 <li class="nav-item">
                        <a class="nav-item-link" href="catalog.html">Catalog</a>  
				<ul>
				   <li><a href="#">Data Listing</a></li>
				   <li><a href="#">Web Scheduling</a></li>
				   <li><a href="#">Google Maps Application</a></li>
				</ul>         
			  </li>

                     <li class="nav-item">
                        <a class="nav-item-link" href="/blogs/news">Blog</a>                
                     </li>
                     <li class="nav-item">
                        <a class="nav-item-link" href="/pages/about-us">About Us</a>                
                     </li>
                  </ul>
               </nav>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

nav ul,nav ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }
      .nav-item  ul{
          padding:0;
          border: 1px solid black;
          text-align:left;

        }
    .nav-item  ul li{padding: 0;}
      .nav-item  ul li:hover{
          background-color:#d1d1d1;
        }
    .nav-bar {
      text-align: center;
position: relative;
    }
    @media screen and (min-width: 769px) {
      .nav-bar--left {
        display: table;
        table-layout: fixed;
        width: 100%;
        text-align: left;
      }

      .nav-bar--left .grid-item {
        float: none;
        display: table-cell;
        vertical-align: middle;
      }
    }
    #nav {
      position: relative;
      display: block;
      list-style-type: none;
      padding: 0;
      margin: 20px 0;
      font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif;
      white-space: nowrap;
    }

    .nav-bar--left #nav {
      margin: 1em 0 0;
      text-align: right;
    }

    @media screen and (max-width: 768px) {
      #nav,.nav-bar--left #nav {
        width: 100%;
        white-space: normal;
        margin: 20px 0 10px;
        text-align: inherit;
      }
    }

    .nav-item {
      display: inline-block;
      padding: 2px 30px;
    }

    @media screen and (max-width: 768px) {
      .nav-item {
        padding: 10px 20px;
      }
    }

    #nav>.nav-item {
      border-left: 1px solid #e8e8e8;
    }

    #nav>.nav-item.first {
      border-left: none;
      padding-left: 0;
    }

    @media screen and (max-width: 768px) {
      #nav>.nav-item {
        border: 0 none;
      }
    }

    .nav-item-link {
      display: inline-block;
      color: #211f1f;
      font-size: 14px;
      zoom: 1;
      *display: inline;
    }

    .nav-item-link:hover {
      color: #333;
    }

    .nav-item-link .nav-item.active .nav-item-link {
      color: #333333;
    }

    .sub-nav .sub-nav {
      display: none !important;
    }
    .supports-no-csstransforms .sub-nav {
      white-space: normal;
      width: 200px;
      margin-left: -100px;
    }

    .sub-nav:before {
      content: '';
      display: block;
      position: absolute;
      top: 5px;
      right: 47%;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #211f1f;
      z-index: 40;
    }


    .sub-nav-item,#moreMenu--list .nav-item {
      display: block;
      overflow: hidden;
      padding: 0;
      margin: 0;
      background-color: #211f1f;
    }

    .sub-nav-item.first,#moreMenu--list .nav-item:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .sub-nav-item.last,#moreMenu--list .nav-item:last-child {
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link {
      display: block;
      padding: 15px 20px;
      margin: 0;
      color: #ffffff;
      text-align: center;
      border-top: 1px solid #0b0a0a;
    }

    .sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child {
      border-top: none;
    }

    .sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus {
      color: #ffffff;
      border-top: 1px solid #0b0a0a;
      background-color: #0b0a0a;
    }

    .sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child {
      border-top: none;
    }
    #nav {
        border: 1px solid #ccc;
        text-align: center
        position: relative;
    }
    #nav a {
        text-decoration: none;
        color: #666;
        display: inline-block;
        padding: 10px;
        font-size: 13px;
    }
    #nav ul {
        position: absolute;
        top: 100%;
        left: -1px;
        text-align: left;
        border: 1px solid #ccc;
        display: none;
right: -1px;

    }

    #nav li:hover ul {
        display: block;
    }
<nav id="navWrap" role="navigation">
                      <ul id="nav">
                         <li class="nav-item first active">
                            <a class="nav-item-link" href="/">Home</a>                
                         </li>
    			 <li class="nav-item">
                            <a class="nav-item-link" href="catalog.html">Catalog</a>  
    				<ul>
    				   <li><a href="#">Data Listing</a></li>
    				   <li><a href="#">Web Scheduling</a></li>
    				   <li><a href="#">Google Maps Application</a></li>
    				</ul>         
    			  </li>

                         <li class="nav-item">
                            <a class="nav-item-link" href="/blogs/news">Blog</a>                
                         </li>
                         <li class="nav-item">
                            <a class="nav-item-link" href="/pages/about-us">About Us</a>                
                         </li>
                      </ul>
                   </nav>

相关问题
最新问题