У меня есть требование, где мне нужно работать над меню, которое должно выглядеть примерно так, как показано на изображении ниже Sample CSS дизайн выпадающего меню

Я работал в прошлом на простом понижающего меню, но это время требование немного отличается. Верхние ссылки меню должны менять цвет на синий при наведении &, когда на этой конкретной странице.

Подменю должно появиться при цвете & фоновое изображение, используемое для подменю, должно быть прозрачным. & Подменю должно показывать указатель на родительское меню, как показано на изображении ниже.

Я искал аналогичный пример меню, чтобы я мог реплицировать, но мне не повезло найти его.

Буду признателен, если кто-то может указать мне в правильном направлении.

Или помогите в этом.

Я также установил пример на jsFiddle, но мне нужно добавить дополнительную функцию, как я упоминал выше.

http://jsfiddle.net/4wrDx/

тем временем я также стараюсь работать дальше, чтобы увидеть, если я могу управлять ею. Я не гуру CSS, я больше разработчик, который также управляет проектной работой. Мне нужно это для веб-сайта на основе asp.net.

Пример кода

<body> 

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a> 
        <ul> 
         <li><a href="#">HTML</a></li> 
         <li><a href="#">CSS</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Articles</a> 
      <ul> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">User Experience</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Inspiration</a></li> 
    </ul> 
</nav> 

</body>

ОБНОВЛЕНО:

мне удалось получить до сих пор. Пожалуйста, проверьте ссылку http://jsfiddle.net/4wrDx/10/

источник

2013-08-01 Learning

Теперь проверить эту демо http://jsfiddle.net/4wrDx/3/ –

я сделал то, что вы просили здесь kindof: http://jsfiddle.net/TYdtV/1/ –

Спасибо господину Умеру, я не могу видеть указатель сверху первого ребенка. – Learning

Используется для этого Css * RGBA *

nav ul ul { 
     background: rgba(0,0,0,0.2); // used to RGBA 
border-radius: 0px; padding: 0; 
     position: absolute; 
top: 100%; 
    } 
nav ul ul li a:hover { 
        background: rgba(0,0,0,0.4); // used to RGBA 
       }

Demo

==========

Изменено Для стрелки

nav > ul > li > ul:after { 
content: ""; 
border-left: solid 20px transparent; 
border-right: solid 20px transparent; 
display: inline-block; 
border-bottom: solid 20px rgba(0,0,0,0.7); 
position: absolute; 
top: -19px; 
left: 0; 
}

Updated Demo

источник

2013-08-01 05:39:34

Не совместимо с ie8. Попробуйте конвертер здесь: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/, упомянутый в этом ответе: http: // stackoverflow.com/a/3977240/828584 – mowwwalker

Спасибо, что ваша другая демонстрация прекрасна, но как я могу добавить указатель сверху, как показано в примере изображения моего вопроса. – Learning

@KnowledgeSeeker Теперь посмотрите на эту демонстрацию http://jsfiddle.net/4wrDx/4/ –

CSS дизайн выпадающего меню

ответ

==========

Смежные вопросы