html - hover does not work after dropdown class delete -
i have bootstrap template practising on. in navbar there "blog" , "test"
on test button, removed li class="dropdown "
, because wanted try make button hover active on "blog" button. when hover on test, text display blue, on there not white background.
i cannot figure out how can make work? have make css class button on navbar, not have dropdown.
for fun sake tried delete css, hover still working on blog button.
<div class="collapse navbar-collapse" id="navbar-collapse-1"> <!-- main-menu --> <ul class="nav navbar-nav "> <li class="dropdown "> <a href="blog-large-image-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">blog</a> <ul class="dropdown-menu"> <li ><a href="index-blog.html">blog home <span class="badge">v1.1</span></a></li> <li ><a href="index-blog-2.html">blog home 2 <span class="badge">new</span></a></li> </ul> </li> </ul> <ul class="nav navbar-nav "> <li> <a href="blog-large-image-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">test</a> <ul class="dropdown-menu"> <li ><a href="index-blog.html">blog home <span class="badge">v1.1</span></a></li> <li ><a href="index-blog-2.html">blog home 2 <span class="badge">new</span></a></li> <li class="dropdown "> <a class="dropdown-toggle" data-toggle="dropdown" href="#">large image</a> <ul class="dropdown-menu to-left"> <li ><a href="blog-large-image-right-sidebar.html">right sidebar</a></li> <li ><a href="blog-large-image-left-sidebar.html">left sidebar</a></li> <li ><a href="blog-large-image-no-sidebar.html">without sidebar</a></li> </ul> </li> <li class="dropdown "> <a class="dropdown-toggle" data-toggle="dropdown" href="#">medium image</a> <ul class="dropdown-menu to-left"> <li ><a href="blog-medium-image-right-sidebar.html">right sidebar</a></li> <li ><a href="blog-medium-image-left-sidebar.html">left sidebar</a></li> <li ><a href="blog-medium-image-no-sidebar.html">without sidebar</a></li> </ul> </li> <li class="dropdown "> <a class="dropdown-toggle" data-toggle="dropdown" href="#">masonry</a> <ul class="dropdown-menu to-left"> <li ><a href="blog-masonry-right-sidebar.html">right sidebar</a></li> <li ><a href="blog-masonry-left-sidebar.html">left sidebar</a></li> <li ><a href="blog-masonry-no-sidebar.html">without sidebar</a></li> </ul> </li> <li ><a href="blog-timeline.html">timeline</a></li> <li ><a href="blog-post.html">blog post</a></li> </ul> </li> </ul> </div>
to style links within navigation menus have add 1 of these lines in css file according html (1) if main parent div .navbar-collapse:
.navbar-collapse .navbar-nav>li a{background-color:#fff;}
(2) if main parent navbar-default:
.navbar-default .navbar-nav>li {background-color:#fff;}
(3) if main parent navbar-inverse:
.navbar-inverse .navbar-nav>li a{background-color:#fff;}
and depending on main parent class , class in ul tag
Comments
Post a Comment