Невозможно создать раскрывающееся меню CSS ниже своего родителя?

У меня есть меню, как этотНевозможно создать раскрывающееся меню CSS ниже своего родителя?

<nav id="nav"> 
<ul> 
    <li>Home</li> 
    <li>Menu1 
    <ul> 
    <li>Sub1</li> 
    <li>Sub2</li> 
    </ul> 
    </li> 
    <li>Menu2 
    <ul> 
    <li>Sub1</li> 
    <li>Sub2</li> 
    </ul> 
    </li> 
</ul> 
</nav>

Мой файл CSS, как это

#nav ul li { 
    display: inline; 
} 
#nav ul ul { 
    display: none; 
} 
#nav ul li:hover > ul { 
    display: block; 
    position: absolute; 
} 
#nav ul ul li { 
    display: block; 
}

Пункты подменю выпадающий и выглядят просто отлично, это просто, что они опускаясь под первый элемент списка, дом.

Как я могу заставить их опуститься под элементом родительского списка, в котором они находятся?

источник

2013-05-06 Anonymous

Вот скрипку с рабочим раствором: http://jsbin.com/akazev/2/edit

взглянуть на новый CSS:

nav ul li { 
    display: block; 
    float: left; 
} 
nav ul ul { 
    display: none; 
} 
nav ul li:hover > ul { 
    display: block; 
    position: absolute; 
    margin-left: -30px; 
} 
nav ul ul li { 
    display: block; 
    float: none; 
}

Вместо отображения ссылок первого уровня как инлайн, отображать их либо как inline- блок или поплавок. Вот что прослушивало навигацию. Если вы используете float (как и я), не забудьте установить ссылки более глубокого уровня на float: none. Вам также нужно будет установить маржу слева для абсолютно позиционированных ul.

PS: Не является <nav id="nav"> немного бессмысленным?

источник

2013-05-06 01:29:57 Tyblitz

Потрясающе.! Спасибо. И да, id = «nav» не имеет смысла, но я планирую иметь несколько элементов

@ xExekut3x Добро пожаловать. В этом случае не было бы лучше называть их чем-то вроде nav-before, nav-aside и т. Д. – Tyblitz

Попробуйте

<html> 
<head> 
<style type="text/css"> 
#nav ul li { 
    float:left; 
} 
#nav ul ul { 
    display: none; 
} 
#nav ul li:hover ul { 
    display: block; 
    position:absolute; 
} 
#nav ul ul li { 
    display: block; 
    border:1px #ccc solid; 
    padding:2px; 
    float:none; 
} 
</style> 
</head> 
<body> 
<dev id="nav"> 
<ul> 
    <li>Home</li> 
    <li>Menu1 
    <ul> 
    <li>Sub1</li> 
    <li>Sub2</li> 
    </ul> 
    </li> 
    <li>Menu2 
    <ul> 
    <li>Sub1</li> 
    <li>Sub2</li> 
    </ul> 
    </li> 
</ul> 
</dev> 
</body> 
</html>

источник

2013-05-06 01:33:41

Здесь вы родственную просто обновить свой код

#nav ul li { 
    display: inline; 
} 
#nav li ul { 
    display: none; 
} 
#nav ul li:hover ul { 
    display: block; 
    position: absolute; 
} 
#nav ul ul li { 
    display: block; 
}

< http://jsfiddle.net/dPgQN/ --- это предварительный просмотр

источник

2013-05-06 02:26:35

Ваша скрипка не работает, подменю все еще накладывается друг на друга, т.е. подменю меню 2 отображается в меню 1 – Tyblitz

http: //jsfiddle.net/dPgQN/1/ вы можете попробовать это, отлично работает –

Попробуйте это ..

Код HTML:

<div id="navMenu"> 
     <ul> 
      <li>Home</li> 

      <li>Menu1 
       <ul> 
        <li>Sub1</li> 
        <li>Sub2</li> 
       </ul> 
      </li> 
      <li>Menu2 
       <ul> 
        <li>Sub1</li> 
        <li>Sub2</li> 
       </ul> 
      </li> 
     </ul> 
    </div>

CSS:

#navMenu{ 
    margin:0; 
    padding:0; 
} 
#navMenu ul{ 
    margin:0; 
    padding:0; 
    line-height:30px; 
} 
#navMenu li{ 
    margin:0; 
    padding:5px; 
    list-style:none; 
    float:left; 
    position:relative; 
} 
#navMenu ul ul{ 
    position:absolute; 
    visibility:hidden; 
} 
#navMenu ul li:hover ul{ 
    right: auto; 
    left: 0; 
    visibility:visible 
}

Я надеюсь, что это полезно для вас,

источник

2014-10-18 10:44:52 Sathish

Невозможно создать раскрывающееся меню CSS ниже своего родителя?

ответ

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