0

Why is the hover effect not working? 

<ul id="main-nav">
   <li> 
   <a href="#" style=":hover .sub-nav-1 {display: inline-block;}">test</a>
      <ul class="sub-nav-1" style="display:none">
      //some other lis
      </ul>
   </li> 
</ul>
craphunter
  • 961
  • 2
  • 13
  • 34

2 Answers2

1

Inline styles are generally a poor strategy.

Additionally, the styles you add in an inline declaration can only, be definition, style the element that you've added the inline style to. You cannot add selectors.

To accomplish what your style declaration intends to do, you at a minimum should add the styles in a <style> block inside the <head> element of your page (or better yet, use a CSS Stylesheet):

<style>
    #main-nav a:hover .sub-nav-1 {
        display: inline-block;
    }
</style>

<ul id="main-nav">
   <li> 
   <a href="#">test</a>
      <ul class="sub-nav-1" style="display:none">
      //some other lis
      </ul>
   </li> 
</ul>

Here is a page that discusses the different methods of adding styles.

random_user_name
  • 25,694
  • 7
  • 76
  • 115
0

maybe you should use javascript: 

<a onmouseover="this.style.display='inline-block';" onmouseout="this.style.display='inline';">test</a>

Anyway, harcoding the CSS like that is not the right way to later editing.

Adrian Cumpanasu
  • 1,028
  • 1
  • 10
  • 24