如何为导航栏文本的下拉菜单文本和中心下拉菜单文本重复下划线CSS？

Question

Question 1

When I hover over the navigation bar text in the drop down menu I at the bottom of the box an underline appears. However, I want the process to happen for the nav bar drop down menu text. When the user hovers over the drop down menu text instead of the underline being at the bottom of the text it's at the bottom of the drop down menu box. How can I do this?

Question 2

How can I make the nav bar drop down menu text for the webpages to display one after the other in the centre?

Here is my codepen with all of the html and CSS.

HTML BELOW

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#contact-me">Contact Me</a>
                    </li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
</nav>

Answer 1

Add display: block; position: relative; display: block; position: relative; to the dropdown li 's and a 's. That border is based on an absolutely positioned element, and an absolutely positioned element is positioned relative to the closest non-statically positioned ancestor. And making them both block will ensure they're on their own lines, and the text-align: center you've applied to the parent will work.

 body { margin: 0; padding: 0; } .navbar.navbar-default { background-color: #4D5061; height: 10vh; } .navbar.navbar-default ul { list-style-type: none; text-align: center; } .navbar.navbar-default ul li { display: inline-block; } .dropdown .dropdown-menu { background-color: #4D5061; } .dropdown .dropdown-menu a { color: white; } .navbar.navbar-default ul li a { display: inline-block; padding: 3.5vh 8px 4px; color: white; text-decoration: none; font-size: 14pt; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul li:after { content: ''; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background-color: red; border-radius: 9px; transition: all .2s; } .navbar.navbar-default ul li a:hover { color: red; } .nav.navbar-nav, .nav.navbar-nav>li { float: none; } .navbar.navbar-default ul li:hover:after { right: 0; left: 0; } a:hover { color: red; text-decoration: none; } #logo { padding-top: 2vh; padding-left: 20px; float: left; } section { position: relative; } .section1 { height: 90vh; background-color: #FFFFFF; text-align: center; } .section2 { height: 95vh; background-color: #A59E8C; text-align: center; color: white; } .contact_section { height: 93vh; background-color: grey; } .fa-angle-down { color: #4D5061; position: absolute; bottom: 0px; } footer { height: 5vh; } .navbar.navbar-default ul.dropdown-menu li, .navbar.navbar-default ul.dropdown-menu li a { position: relative; display: block; } 

 <!DOCTYPE html> <html lang="en"> <html> <head> <title>Liam Docherty | London Web Developer &amp; GFX designer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Clients</a> </li> <li><a href="#contact-me">Contact Me</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <section class="section1"> <div class="hero"></div> <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a> </section> <section class="section2" id="section2"> <a href="#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a> </section> <section id="contact-me" class="contact_section"> </section> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> <footer></footer> </html>