Question

这里警报下拉的可用课程我希望将它漂浮到左边并且我没有得到背景请告诉我，重要的是我只想添加更改到那个特定的li

<style type="text/css">
    #ddmenu > li:first-child ul{
        display: none;
        margin-left:1px;
        padding:10px 15px
    }
    #ddmenu > li:hover ul{
        display: block;
        float:none;
        position: absolute;
        list-style-type: none;   
        text-decoration:none;
    }
    #ddmenu > li:hover ul li a{
        text-decoration:none;
    }
</style>

<ul class="nav pull-right" id="ddmenu">
    <li class="menu"><?php echo '<img src="theme/alert.png" alt="alert" height="42" width="42">' ?>
        <ul id="dropdown">
            <li><?php echo'<a href="#">Available courses</a>' ?></li>
        </ul>
    </li>
    <li></li>
    <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
    <li class="navbar-text"><?php echo $OUTPUT->login_info() ?></li>
</ul>

Answer 1

也许你正试图为下拉和左对齐提供背景颜色。

尝试以下代码。

希望下面的代码会有所帮助。

<ul class="nav pull-right" id="ddmenu">
    <li class="menu"><a href="#">Menu</a>
        <ul id="dropdown">
            <li><a href="#">Available courses</a></li>
        </ul>
    </li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
    <li class="navbar-text"><a href="#">Menu</a></li>
 </ul>

CSS

#ddmenu > li:first-child ul {
    display: none;
    margin-left: 1px;
    padding: 10px 15px;
}

#ddmenu > li {
    position: relative;
    list-style: none;
}

#ddmenu > li a {
    padding: 5px;
    background: #ddd;
    display: block;
}

#ddmenu > li:hover ul {
    display: block;
    float: none;
    left: 50px;
    top: 0;
    position: absolute;
    list-style-type: none;
    text-decoration: none;
    z-index: 999;
    padding: 0;
}

#ddmenu > li:hover ul li a {
    text-decoration: none;
}

#ddmenu li ul {
    margin: 0;
    padding: 0;
}

#ddmenu li li a {
    background: red;
    padding: 5px;
    color: #fff;
    display: block;
}

JSFIDDLE DEMO

使用Css下拉列表

1 个答案: