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

Question

第一张图片是dasktop的普通导航栏。第二张图片是移动导航栏。

问题在于，在桌面设计中我无法实现这一点，当我用鼠标覆盖导航栏中的链接时，我的链接将从灰色变为橙色。

图片1：

图片2：

我如何实现这一目标？这是我的代码：

HTML：

            <nav>
                <ul>
                    <span class="lijeviLinkovi">
                        <a href="#"><li>NASLOVNA</li></a>
                        <a href="#"><li>DESTINACIJE</li></a>
                        <a href="#"><li>O NAMA</li></a>
                        <a href="#"><li>KONTAKT</li></a>
                    </span>
                    <span class="desniLinkovi">
                        <a class="login" href="#"><li>LOGIN</li></a>
                        <a class="reg" href="#"><li>REGISTRIRAJ SE</li></a>
                    </span>
                    <ul class="jeziciUL">
                        <li> <a href="#"> HR </a> </li> 
                        <li> <a href="#"> IT </a> </li> 
                        <li> <a href="#"> EN </a> </li> 
                        <li> <a href="#"> DS </a> </li> 
                    </ul>

                    <ul class="drustveneMrezeUL">
                        <li> <a href="#"> <img src="img/f_icon.gif"/> </a> </li> 
                        <li> <a href="#"> <img src="img/t_icon.gif"/> </a> </li> 
                        <li> <a href="#"> <img src="img/g_icon.gif"/> </a> </li> 
                    </ul>
                </ul>
                <div class="handle"><img src="img/menu_siva1.gif"/></div>
            </nav>

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;
        }

}

Answer 1

ul必须仅包含li。

您可以使用css中的以下规则集实现您想要的目标：

nav a:hover {color: red;}