如何在CSS中对齐导航下拉菜单？
[英]How to align nav drop down menu in css?
问题描述
我已经创建了简单的导航下拉菜单。。但是我仍然没有完成。
这是我的HTML和CSS工作的jsfiddle： http : //jsfiddle.net/rym2zku1/
当我悬停目录链接时，我需要显示如下所示：
的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 个解决方案
解决方案1
2 2015-02-04 05:13:48
我在JsFiddle的Here中编写了我的代码
<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>
解决方案2
1 2015-02-04 05:07:39
在CSS中添加此代码
#nav ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
#nav li:hover ul {
display: block;
}
解决方案3
1 已采纳 2015-02-04 05:19:07
这是你想要的 ？
您只需要将此CSS属性添加到下拉<ul>
.nav-item ul{
padding:inherit;
border: 1px solid black;
text-align:left;
border-radius:4px;
}
这是小提琴 。
干杯!
解决方案4
0 2015-02-04 06:04:25
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; }
<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 2015-02-04 06:34:42
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>
如何为导航栏文本的下拉菜单文本和中心下拉菜单文本重复下划线CSS？
[英]How can I repeat the underline CSS for my nav bar text for my drop down menu text and centre drop down menu text?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.