I am using Typeahead auto suggest. Unfortunately I cannot use the bootstrap css since it will break the whole site. So I am basically trying to manually style the dynamically generated ul that pops up. Before I attempted to do the css, I practiced using Firebug. Everything looked ok from what I did on Firebug. But when I actually deploy it, the css is not there.
Below is my html structure:
<body>
<div></div>
<div></div>
<div></div>
...
<div id="header">
<div></div>
<div></div>
<div></div>
...
<div id="textandpics">
<div id="box">
<div id="theoneimlookingat">
<input type="text"/>
// here is where the auto suggest ul will pop up
<ul class="typeahead dropdown-menu/>
<li></li>
<li></li>
<li></li>
...
<li></li>
<li></li>
</ul>
</div>
</div>
<div></div>
</div>
</div>
...
CSS:
.typeahead {z-index: 1051;position: absolute;}
.typeahead .dropdown-menu {width:400px; margin:0; list-style:none; border:1px black solid;}
.typeahead .dropdown-menu > li {margin-left:7px;}
.typeahead .dropdown-menu > li:hover {background-color:#EEE8AA;}
.typeahead .dropdown-menu a {color:black; text-decoration:none;}
The <ul>
has two classes, so there shouldn't be a descendant combinator between them .. remove the space between the elements' two classes, e.g.
.typeahead.dropdown-menu {
/* CSS */
}