asp.net mvc - ASP MVC Bootstrap Navigation Dropdowns: Hover on Large Screen, Click on Small -

i using standard bootstrap class="nav navbar-nav" navigation dropdown menus:

<ul class="nav navbar-nav">     <li role="presentation" class="@html.isselected("appointments", "selected")">         <a data-toggle="dropdown" href="#"><img src="/content/images/nav_appts.png" style="padding: 0px 5px 3px 0px;">appointments<span class="caret"></span></a>         <ul class="dropdown-menu" role="menu">             <li>@html.actionlink("appointments page 1", "index", "appointments")</li>             <li>@html.actionlink("appointments page 2", "page2", "appointments")</li>         </ul>     </li>     // more menu items </ul> 

out of box, dropdowns appear if click on them. found way make them appear if hover. in css:

/* causes dropdowns displayed on-hover instead of on-click */ ul.nav li.dropdown:hover > ul.dropdown-menu {     display: block;  } 

this works great on standard large screen. once screen becomes tablet size, navigation switches box bars drops down show nav. once here, not want sub-menu items appear on hover. understand on tablets, concept of 'hover' doesn't exist, there no mouse. none less, in case using site small laptop (etc etc) want able control this. tried this:

@media screen , (max-width: 830px) {     ul.nav li.dropdown:hover > ul.dropdown-menu {         display: inline;       } } 

and played around few other options, can't seem right.

use 2 rules different width each applies depending on screen size:

@media screen , (min-width: 831px) {     ul.nav li.dropdown:hover > ul.dropdown-menu {         display: block;       } }  @media screen , (max-width: 830px) {     ul.nav li.dropdown:hover > ul.dropdown-menu {         display: inline;       } }