progolf

Never-mind. Its okay now. I had a <div> tag in the wrong place

.navbar { overflow: hidden; background-color: #487918; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 12px; color: white; text-align: center; padding: 15px 20px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 12px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ffffff; color: #487918; color: #487918; color: #487918; color: #487918; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 8px 16px; text-decoration: none; display: block; text-align: left; color: inherit; } .dropdown-content a:hover { background-color: #487918; color: #ffffff; } a.active { background-color: #cca300;; color: #fff; cursor: default; float: right; padding: 15px 19px; } .dropdown:hover .dropdown-content { display: block; }

I'm trying to add a couple of dropdown columns to this script. it works fine on chrome but i get a strange white line between the columns just after "about us". I created a test page www.hkprogolf.com/test.html. If you view this page in safari and hover over "about us" you can see the line but its okay in chrome. Just wondering if the code is correct. <div class="navbar"> <a href="#home">Home</a> <a class="nav-link active" href="">Active Page</a> <div class="dropdown"> <button class="dropbtn">Club Membership </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#pag2">Member Tournaments</a> <div class="dropdown"> <button class="dropbtn">Golf Training </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">About Us </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#pag3">Photo Gallery</a> </div>