CSS inline -> How to inline hover css roles for Dropdown list

Please see this. It's not really a good idea. You can't inline css pseudo elements (denoted by a :). You could use onMouseOver/onMouseOut events, but that's not very good either. https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css

Maybe explain what you're trying to achieve and why you can't use css classes to achieve what you're after?

@cronix i have seen these options before and they will not work, the colors of the dropdown menu are streamed from DB, and they should be inlined (that what i know, not sure if there is a better way).

// this is the controller 
$navbar = Topmenu::findOrFail(1);  // this object contains all color values

as per blade file i have this navbar, i already have the main color of the navbar inlined {{$navbar->submenu_color}}.

the hover class is not getting dont, see below

<nav class="container mx-auto flex items-center justify-between flex-wrap">

      <nav class="nav">

            // ....

            <div class="sub-nav absolute w-full lg:w-64 shadow-lg bg-white rounded">

              <ul class="sub-nav__list list-reset" style="background-color: {{$navbar->submenu_color}}">

                <li class="sub-nav__item">

                  <a href="javascript:void(0)" class="sub-nav__link no-underline text-grey-dark flex items-center p-4" style=" //... hover class needed herer">
                    
                  </a>

                </li>

              </ul>

            </div>
          
            // ...

      </nav>

</nav>

hope its clear now

@nhayder I'd store the class to use in the db instead of however you're doing it, which would have a color defined in a real stylesheet, instead of a raw color code.

stylesheet

li.color1:hover { color: red }
li.color2:hover { color: green }

Then store 'color1' and 'color2' in the db, and output whatever class you need

<li class={{ $something->className }}">

You just can't do hover in an elements style property (or any other pseudo-element/pseudo-selector). You can only set that via a stylesheet (or alter via javascript). It won't work otherwise, so you need to find a better solution that will work around that limitation of the css specs.