Как открыть подменю при наведении главного меню?

Привет Я делаю меню и подменю. Я сделал меню со всем эффектом. Я хочу открыть подменю при наведении пункта меню, но он не открывается; он показывает, что я уже открыт.Как открыть подменю при наведении главного меню?

Мои JSFiddle

#companymenu { 
 
    background-color: #999; 
 
    height:35px; 
 
    width:100%; 
 
    margin-top: -10px; 
 
} 
 
.companymenuul { 
 
    list-style-type: none; 
 
} 
 
.companymenuli { 
 
    float: left; 
 
    display:block; 
 
    line-height: 35px; 
 
    padding: 0 15px; 
 
} 
 
.alisting { 
 
    color:#000; 
 
    text-decoration:none; 
 
} 
 
.aactive { 
 
    color: #333; 
 
    background-color: #fff; 
 
    border-top: 2px solid #999; 
 
    margin-top: -2px; 
 
} 
 
.companymenuli a:hover { 
 
    color:#C63; 
 
    text-decoration:none; 
 
    cursor:pointer; 
 
    padding-top:10px; 
 
    padding-left:24px; 
 
    padding-right: 23px; 
 
    padding-bottom: 11px; 
 
    background-color: #fff; 
 
    border-top: 2px solid #999; 
 
    margin-top: -2px; 
 
} 
 
.caret { 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    vertical-align: top; 
 
    border-top: 4px solid #fff; 
 
    border-right: 4px solid transparent; 
 
    border-left: 4px solid transparent; 
 
    content:""; 
 
    margin-top: 15px; 
 
    margin-left: 5px; 
 
    border-bottom-color: #fff; 
 
    filter: alpha(opacity=100); 
 
    background-image:url(images/topnav-arrow-down-white-ie6.png)no-repeat 0 0 transparent; 
 
    _display: inline; 
 
    _zoom: 1; 
 
    _width: 7px; 
 
    _height: 4px; 
 
    _margin-top: 8px; 
 
    _margin-left: 5px; 
 
    _line-height: 4px; 
 
    _border: none; 
 
    _vertical-align: baseline; 
 
}

<div id="companymenu"> 
 
    <ul class="companymenuul"> 
 
     <li class="companymenuli aactive"><a class="alisting">Home</a></li> 
 
     <li class="companymenuli"><a class="alisting">Product Categories<b class="caret"></b></a> 
 
      <ul> 
 
       <li>1</li> 
 
       <li>2</li> 
 
       <li>3</li> 
 
      </ul> 
 
     </li> 
 
     <li class="companymenuli"><a class="alisting">Company Profile <b class="caret"></b></a> 
 
     </li> 
 
     <li class="companymenuli"><a class="alisting">Contacts</a> 
 
     </li> 
 
    </ul> 
 
</div>

Я хочу открыть <ul> по наведению продукта Категории <li>

источник

2013-12-23 Anonymous

Очень грязный код, здесь вы идете - http://jsfiddle.net/n7J8x/5/ –

@ Mr.Alien - почему грязный код, сэр? Скажите, чтобы я мог изменить свой код и сделать его более эффективным. Спасибо. –

Вы можете ссылаться на мой пример и прервать свой код чрезмерно :) –

Попробуйте ниже HTML и CSS

<li class="companymenuli"><a class="alisting">Product Categories <b class="caret"></b></a> 
       <ul class="ul"> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
       </ul>      
</li> 

<style> 
.ul 
{ 
    display:none; 
} 
.companymenuli:hover .ul 
{ 
    display:block 
} 
</style>

источник

2013-12-23 11:19:56 Kishori

Вы ищете что-то вроде этого? Fiddle

Дайте вашему подменю класс и добавьте display:none; к нему. После того, как вы можете дать парить display:block;

Так у вас есть что-то вроде этого:

HTML:

<li class="companymenuli"><a class="alisting">Product Categories <b class="caret"></b></a> 
    <ul class="submenu"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
</li>

CSS:

.submenu{ 
    display:none; 
} 

.companymenuli:hover > ul{ 
    display:block; 
}

EDIT:

Для удаления пули просто добавляют list-style-type:none; на ваш submenu li тег. Вот ваша обновленная скрипка:

Updated Fiddle

источник

2013-12-23 11:21:03 Roman

Что делать, чтобы удалять пули над подменю 'li' –

Я сделал редактирование. Посмотрите на это :) – Roman

Хорошо сделайте обновление и в моем коде, спасибо. –

добавить CSS в существующем CSS:

.companymenuli ul { 
    display:none; 
} 

.companymenuli:hover ul { 
    display:block; 
}

, то он будет работать

источник

2013-12-23 11:21:04 Era

Проверьте решение Здесь

http://jsfiddle.net/n7J8x/4/

По умолчанию скрывать подменю s

.submenu{ 
    display:none; 
}

Открыть подменю при наведении курсора мыши на главном меню

.companymenuul > li:hover ul{ 
    display: block; 
}

источник

2013-12-23 11:23:03

-1

Полностью решаемые answer fiddle. Я решил это самостоятельно.

Спасибо всем, кто мне помогает или нет.

.companymenuli:hover > ul{ 
    display:block; 
    background-color: #999; 
    color:#FFF; 
} 
.submenu{ 
    display:none; 
    position:absolute; 
    z-index:1; 
    width: 120px; 
} 
.submenu li{ 
    list-style-type:none; 
} 
.m-header { 
    border: none; 
    border-bottom: 2px solid #999; 
    background-color: #fff; 
    color: #333; 
    font-size: 16px; 
    width:100%; 
    position:absolute; 
}

источник

2013-12-23 12:44:33

-2

.companymenuul .companymenuli aactive:hover ul{ 
    display:block; 
}

источник

2017-08-31 08:21:22

Как открыть подменю при наведении главного меню?

ответ

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