Make <li> not scrollable in <ul>

Question

I have the <ul> like this.

I want the text "You have 3 reminders." not scrolling and stay on top. How can I do that?

In the <ul> I have some code like this.

<ul class="dropdown-menu" role="menu" id="reminder"
style="max-height: 200px; width: 400px; overflow: hidden; 
overflow-y: scroll; padding-left: 10px; padding-right: 10px;"></ul>

Thank for your help.

Answer 1

Maybe try to set the "You Have 3 Reminders" As the header and the rest mainly as content?

Something like this: HTML

<article>
    <header>You Have 3 Reminders</header>

    <p id="ArticleTitle">Task Satu by admin to admin</p>

    <p id="Content">You have <b>Two Days Before</b> Reminder.</p>
</article>

CSS

    ​#header {
        height:50px;
        width:100%;
        position:fixed;
        top:0;
        left:0;    
    }
.ArticleTitle{
    top:10;
}

Answer 2

You can experiment with position: fixed to get the result.

Another option is to use position: sticky Although it isn't available in all browsers. Here is a reference to positioning.