Элементы меню CSS не отображаются в Chrome

Question

По какой-то причине это работает в Firefox и iexplore, но не в Chrome. Предполагается скрывать подменю до тех пор, пока на него не наведет указатель мыши - в chrome указатель мыши четко работает при изменении цвета и т. Д., Но меню не появляется! любая помощь, которую вы можете предложить, была бы удивительной! спасибо !!

#menu, #menu ul
{
margin:0px;
 padding:0px;
 list-style:none;
 list-style-position:outside;
 position:relative;
 line-height:2em; /* this would mean the element is double the height of the font */
}

/* set up colours, borders and element padding */
#menu a:link, #menu a:active, #menu a:visited
{
 display:block;
 padding:0px 5px; /* shorthand padding - this means top and bottom padding is 0, left and right are 5px */
 color: #000000; /* link text colour */
 text-decoration:none;
 background-color:#F90; /* specifies background colour of links */
 font-weight:bold;
 color:#FFC;
 /* border stuff */
 border:1px solid #F90; /* shorthand, border is 1px wide, solid and coloured */


}

/* set up hover colour for links */
#menu a:hover
{ 
 background-color:#FC6;
 color:#900;
 border:1px solid #F60;
}

/* position menu elements horizontally */
#menu li
{
 width:7em;
 position:relative;
}

/* position and hide nested lists (width required to make menu display vertically) and "top" value needs same measurement as defined for #menu */
#menu ul
{
 position:absolute;
 width:7em;
 left:7em; /* same value as width - no bigger otherwise gap will appear and menu will not work */
 top:0em; /* line up with parent list item */
 display:none;
}

/* set width of links to 12em */
#menu li ul a
{
 width:7em;
 float:left;
}

/* display information for sub-menus */
#menu ul ul
{
 top:auto;
}

#menu li ul ul
{
 left:7em;
 margin: 0px 0px 0px 10px;  /*shorthand margin command */
}

/* display when rolled over - also number of sub-menus to display - if wanted to use more submenus, would need more UL's  (ie ul ul ul instead of ul) */
#menu li:hover ul ul
{
 display:none;
}

#menu li:hover ul, #menu li li:hover ul
{
 display:block;
}

Answer 1

Я наткнулся на это в поисках решения аналогичной проблемы. Сайт OP теперь работает в Chrome, но я обнаружил, что проблема в том, как Chrome обрабатывает определенные элементы. Между основным пунктом меню и элементом подменю был разрыв в 1 пиксель, и нажатие курсора скрыло подменю. Решением было установить margin-top в подменю на -1px, чтобы устранить этот пробел. В случае OP, кажется, что пробел был бы слева от подменю, а не сверху.

Примечание: мой отличается от OP тем, что я использовал <div> вместо <ul> и <li>, но принцип тот же.

сайт: WeirdCalculator.com

Из таблицы стилей CSS:

.menuitem {
    display: inline;
}

.menuitem:hover .show {
    margin-top: -1px;
}

Answer 2

@ lipelip почти прав.

Вы должны удалить position: relative только из внутренних <li> тегов - , а не внешних.

Если это трудно понять, вы можете просто добавить это в свой CSS вместо этого:

#menu li ul li
{
 position:static;
}

Это решает проблему, устанавливая правильное свойство position только для внутренних тегов <li>.

Answer 3

Также, пожалуйста, проверьте свойство float для этой проблемы. В моем CSS есть float:none, я удалил float, и это решило мою проблему с текстом, который не появлялся во всплывающих меню в Chrome.

Answer 4

Снять позицию: относительная;у вас есть #menu li {} Не знаю, почему он не работает в Chrome, но я не думаю, что вам все равно это нужно.