Html 我的导航栏有问题。（见图）

第一幅图像是dasktop的正常导航条。第二幅图像是移动设备的导航栏

问题是，在桌面设计中，当我用鼠标覆盖导航栏中的链接时，我无法实现从灰色到橙色的链接

图1：

图2：

我怎样才能做到这一点？这是我的密码：

HTML:

媒体查询：

@media screen and  (max-width: 450px){

.tijelo {
background-color: red;
}

    .vjfKont{
        display: none;
    }

.navigacijaKont{
    background: none; /*url(img/bcg_nav_siva.gif) repeat*/
}

.navigacijaKont a{
    font-size: 100%;

}

        .ulLijevo {
            float: left;
            margin: 0 auto;
        }

        .ulLijevo a li{
            float: left;
            display: inline-block;
            padding: 14px 0px;
            border-right: none;
            color: #636363;
            background: url(img/bcg_nav_siva.gif) repeat;
            width: 115%;                
        }

        .ulLijevo a li:hover{
            background: url(img/bcg_nav.gif) repeat;
        }

        .ulDesno {
            float: left;
            margin: 0 auto;
        }

        .ulDesno a li{
            float: left;
            display: inline-block;
            padding: 14px 0px;
            color: #f48222;
            font-weight: bold;
            width: 210%;
            background: url(img/bcg_nav_siva.gif) repeat;
        }

        .ulDesno a li:hover{
            background: url(img/bcg_nav.gif) repeat;
        }

---

}

ul

必须仅包含

li

您可以使用css中的以下规则集实现所需：

---

nav a:hover{color:red；}

可能是我，但我看不到任何图像？不允许用锚定标签包装li标签。您还需要清理CSS以适应此更改。

.navigacijaKont{
    float: left;
    margin: 0 auto;
    width: 100%;
    background: url(img/bcg_nav_siva.gif) repeat;
}

.navigacijaKont a{
    text-decoration: none;
    text-shadow: 2px 2px #fff;
    font-size: 87.5%;
}

    .navigacijaKont ul{
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }

        .ulLijevo {
            float: left;
        }

        .ulLijevo a li{
            float: left;
            display: inline;
            padding: 14px 30px;
            border-right: 1px solid #fff;
            color: #636363;
            background: url(img/bcg_nav_siva.gif) repeat;   
        }

        .ulLijevo a li:hover{
            background: url(img/bcg_nav.gif) repeat;
        }

        .ulDesno {
            float: right;
        }

        .ulDesno a li{
            float: left;
            display: inline;
            padding: 14px 30px;
            color: #f48222;
            font-weight: bold;
            background: url(img/bcg_nav_siva.gif) repeat;
        }

        .ulDesno a li:hover{
            background: url(img/bcg_nav.gif) repeat;
        }

@media screen and  (max-width: 450px){

.tijelo {
background-color: red;
}

    .vjfKont{
        display: none;
    }

.navigacijaKont{
    background: none; /*url(img/bcg_nav_siva.gif) repeat*/
}

.navigacijaKont a{
    font-size: 100%;

}

        .ulLijevo {
            float: left;
            margin: 0 auto;
        }

        .ulLijevo a li{
            float: left;
            display: inline-block;
            padding: 14px 0px;
            border-right: none;
            color: #636363;
            background: url(img/bcg_nav_siva.gif) repeat;
            width: 115%;                
        }

        .ulLijevo a li:hover{
            background: url(img/bcg_nav.gif) repeat;
        }

        .ulDesno {
            float: left;
            margin: 0 auto;
        }

        .ulDesno a li{
            float: left;
            display: inline-block;
            padding: 14px 0px;
            color: #f48222;
            font-weight: bold;
            width: 210%;
            background: url(img/bcg_nav_siva.gif) repeat;
        }

        .ulDesno a li:hover{
            background: url(img/bcg_nav.gif) repeat;
        }