Dynamic UL is not picking up the css? Or am I doing the css wrong? [closed]

StackOverflow https://stackoverflow.com/questions/16716859

質問

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 */
}

他のヒント

Your syntax is wrong. In your CSS, .dropdown-menu is a descendant of .typeahead. Change your .typeahead .dropdown-menu CSS rules to .typeahead.dropdown-menu or simply .dropdown-menu.

You forgot a quotation mark in your ul block. Try this:

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top