ahmed_sa Ответов: 2

Как изменить CSS-класса для работы в левом меню на сайте образец ?

Проблема
Как сделать меню как меню на левой стороне этого образца веб-сайта, как показано ниже
الصفوه للإعلان والديكور[^]
Как сделать то же самое меню на веб-сайте выше с наведением курсора мыши и красной линией выше, когда курсор мыши
относиться к слову о меню
На самом деле мне нужно быть таким же меню на сайте ?

Что я уже пробовал:

что я пытаюсь сделать следующим образом
<!doctype html>
<html
<head>
<title> safwa for decore </title>
<style type="text/css">
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        float: left; 
        padding:5px 0; 
        color:#fff; 
        text-decoration:none;
        margin:0 10px; 
        font-family:arial;
        
        
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
        border-top:3px solid #fff;

    }
    ul li ul.dropdown{
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }

</style>
</head>
<body>
<img src="alsafwa-logo.png" alt ="logo" width="300px" heigh="200px" style="float:right"/>
<ul>
<li><a href = "#">الرئيسيه  </a> </li>
<li><a href = "#">من نحن </a> </li>
<li><a href ="#"> خدماتنا </a> </li>
<li><a href ="#"> اعمالنا </a> </li>
<li><a href ="#"> اخر الاخبار </a> </li>
<li><a href ="#"> اتصل بنا </a> </li>
</ul>
</body>
</html>

shawn patil

Не могли бы вы объяснить, что именно вы хотите, потому что на этом сайте нет левого меню, и, согласно вашему объяснению, я вас не получил.

2 Ответов

Рейтинг:
1

Harsh.Shah.ifour

- Привет !!
Я добавил красную линию, когда курсор мыши ссылается на слово в меню, а также исправил меню с левой стороны. Попробовать это. 

<!doctype html>
<html
<head>
<title> safwa for decore </title>

<style>
    body       
    {
        margin:0px;
    }       
    ul        
    {
        margin:0px;
        padding: 5px;;
        list-style: none;
        background: #f2f2f2;
    }
    ul li
    {
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a
    {
        display: block;
        padding: 8px 25px;
        color: #333;
        float: left;
        padding:5px 0;
        color:#fff;
        margin:0 10px;
        font-family:arial;
    }
        
    ul li a:hover 
    {
            color: #fff;
            background: #939393;            
            text-decoration: overline;
            text-decoration-color: red;
    }
    ul li ul.dropdown
    {
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown
    {
        display: block;	/* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }
</style>
</head>

<body>
<img src="alsafwa-logo.png" alt ="logo" width="300px" heigh="200px" style="float:right"/>
<ul>
<li><a href = "#">الرئيسيه  </a> </li>
<li><a href = "#">من نحن </a> </li>
<li><a href ="#"> خدماتنا </a> </li>
<li><a href ="#"> اعمالنا </a> </li>
<li><a href ="#"> اخر الاخبار </a> </li>
<li><a href ="#"> اتصل بنا </a> </li>
</ul>
</body>
</html>

Рейтинг:
0

shawn patil

Цитата:
Не могли бы вы объяснить, что именно вы хотите, потому что на этом сайте нет левого меню, и, согласно вашему объяснению, я вас не получил.

Richard Deeming

Если вы хотите попросить разъяснений, нажмите кнопку "есть вопрос или комментарий?" кнопка под вопросом. Не размещайте свой вопрос в разделе "Добавить свой решение вот" шкатулка.

shawn patil

понял, спасибо