CSS Issue

by ashu_mdu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
  <ul class='marquee'>
    <li>1. Longer text lorem ipsum dolor sit amet,<h3>consectetur adipiscing elit END</h3></li>
	
    <li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
	
    <li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
	
    <li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
	
	<ul><li><b>I'm the Child Unordered List Element. I don't want this CSS</b></li></ul>
</ul>

CSS

body {
    margin: 10px;
    font-family:'Lato', sans-serif;
}
.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);
}
ul.marquee li {
    display: inline-block;
    padding: 10px 20px;
    
}

JavaScript

$(function () {
    $('.marquee').marquee({
	
        duration: 10000,
        duplicate: false,
		delayBeforeStart:0,
		
		allowCss3Support: true,
		gap: 600,
		
    });
});