影响导航栏和滑块的CSS

Question

Basically the problem I am having is that I have some CSS that is affecting both my nav bar and slider, because they are both using and essentially the nav bar is working but the slider is being affected.

I am still pretty new to coding so I didn't know what specifically to search online to fix this problem, any help is greatly appreciated.

HTML being affected.

 <div class="flexslider"> <ul class="slides"> <li> <img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;"> </li> <li> <img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;"> </li> </ul> </div> 

 NAV BAR <!--section1--> <section id="top" class="Back to top"> <img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png"> <div class="top-bar-container"> <div class="top-bar"> </div> <nav class="nav-bar"> <ul> <li><a href="#content" class="selected">About</a></li> <li><a href="#photos" >Gallery</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> <div class="header-container"> <div class="header"> </h3> <h4> 

NAV BAR CSS:

 .top-bar-container .top-bar { width: 800px; } .top-bar-container .top-bar .logo { float: left; } .top-bar-container .top-bar .logo span { color: #27AD60; } .top-bar-container .nav-bar { float: right; } .top-bar-container .nav-bar ul li { list-style-type: none; display: inline-block; padding: 21px 27px; font-size:15px; } .top-bar-container .nav-bar ul li a:not(.active) { text-decoration: none; color: white; } .top-bar-container .nav-bar .active { color: white; text-decoration: none; padding-top:34px; } ul { list-style: none; } ul li { display: inline-block; } ul li a { display: block; padding: 16px; color: grey; text-decoration: none; position: relative; } ul li a:hover, ul li a.selected{ color:white; } ul li a.selected:before, ul li a:hover:before { content: ''; width: 100%; position: absolute; top: -19px; left: 0; height: 3px; background: white; } h3{ font-size: 121.5%; line-height: 2.; font-family: 'PT Sans', sans-serif; text-align: center; } 

Answer 1

Your issue is that the CSS selectors are not descriptive enough. ul and li will target both HTML sections.

You can change them to classes or ids so that the selectors are more descriptive.

I would recommend reading up on CSS selectors as it will make HTML and CSS a lot easier.