Горизонтальное выпадающее меню Hover

Я устал сборки горизонтальное выпадающее меню из this tuts и demo Горизонтальное выпадающее меню Hover

Я хочу меню выглядеть следующим образом:

enter image description here

Я хочу подменю отображаются справа родительское меню, http://alistapart.com/article/horizdropdowns#snippet4

Следующий шаг - это подменю. Мы хотим, чтобы каждое подменю отображалось справа от его родительского пункта меню, когда этот элемент зависает.

li ul { 
position: absolute; 
left: 149px; 
top: 0; 
display: none; 
}

Но у меня есть подменю не отображаются справа от родительского меню выглядит следующим образом:

enter image description here

here jsfiddle

источник

2013-09-16 GeekToL

Ваше изображение не загружается - пожалуйста, вставьте снова источник, отличный от imagur –

Удалите существующий стиль вашего уль скрытый список и добавить следующий класс: subdrop-list

Затем добавьте этот CSS:

.subdrop-list { 
    display: none; 
    position: relative; 
} 
.subdrop-list ul { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

JSFiddle: http://jsfiddle.net/4jVtw/3/

источник

2013-09-16 10:53:47 Oliboy50

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

источник

2013-09-16 10:52:50 Vladimir

Я надеюсь, что это помогает - просто добавить на последнем этапе css

margin-top:80px;

http://jsfiddle.net/4jVtw/4/

источник

2013-09-16 10:54:58 Cypho

Просто используйте margin-top:35px; вместо top:0;

источник

2013-09-16 10:55:05

Измените CSS из .has_sub_sub ul в margin-top : -41px; вместо top : 0

.sidebar #nav .has_sub ul .has_sub_sub ul { 
    position: absolute; 
    left: 231px; 
    width: 230px; 
    margin-top: -41px; 
    display: none; 
    background: #efefef url("http://responsivewebinc.com/premium/macadmin/img/cream.png") repeat; 
}

JSFiddle

источник

2013-09-16 10:57:13

Попробуйте http://jsfiddle.net/4jVtw/5/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Drop Down</title> 

<script type="text/javascript" > 
// JavaScript Document 

startList = function() { 
if (document.all&&document.getElementById) { 
navRoot = document.getElementById("nav"); 
for (i=0; i<navRoot.childNodes.length; i++) { 
node = navRoot.childNodes[i]; 
if (node.nodeName=="LI") { 
node.onmouseover=function() { 
this.className+=" over"; 
    } 
    node.onmouseout=function() { 
    this.className=this.className.replace(" over", ""); 
    } 
    } 
    } 
} 
} 
window.onload=startList; 
</script> 
<style type="text/css"> 

body { 
    font: 11px verdana; 
} 
ul { 
    border-bottom: 1px solid #CCCCCC; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    width: 150px; 
} 
ul li { 
    position: relative; 
} 
li ul { 
    display: none; 
    left: 149px; 
    position: absolute; 
    top: 0; 
} 
ul li a { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: #CCCCCC#CCCCCC -moz-use-text-color; 
    border-image: none; 
    border-style: solid solid none; 
    border-width: 1px 1px 0; 
    color: #777777; 
    display: block; 
    padding: 5px; 
    text-decoration: none; 
} 
* html ul li { 
    float: left; 
    height: 1%; 
} 
* html ul li a { 
    height: 1%; 
} 
li:hover ul, li.over ul { 
    display: block; 

} 

</style> 
</head> 
<body> 
<ul id="nav"> 
    <li><a href="#">Dashboard</a></li> 

    <li><a href="#">Catalog</a> 
    <ul> 
     <li><a href="#">Attribute</a></li> 
     <li><a href="#">Attribute Group</a></li> 

    </ul> 
    </li> 

</ul> 
</body> 
</html>

источник

2013-09-16 10:58:04 user2775080

Горизонтальное выпадающее меню Hover

ответ

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