子元素不起作用

嗨我只是想知道我是如何得到我的孩子元素在父母之下？在navmenu感謝 http://jsfiddle.net/5xs0Lyu2/子元素不起作用

<html> 
<head> 
<script type="text/javascript"> 

</script> 
<title> 
Sample Website 
</title> 
<style> 
ul#navmenu, ul.sub1, ul.sub2 { 
    list-style-type: none; 
    font-size: 9pt; 
    } 

.li1 { 
    width: 125px; 
    text-align: center; 
    position: relative; 
    float: left; 
    margin-right: 0px; 
    } 

    ul#navmenu { 
    width: 641px; 
    margin: 0px auto; 
    } 

ul#navmenu a { 
    text-decoration: none; 
    display: block; 
    width: 125px; 
    height: 25px; 
    line-height: 25px; 
    background-color: orange; 
    color: #000; 
    } 

ul#navmenu .sub1 li { 
    } 

ul#navmenu .sub1 a { 
    margin-top: 5px; 
    } 

ul#navmenu .sub2 a { 
    margin-left: 3px; 
    } 

ul#navmenu li:hover > a { 
    background-color: grey; 
    } 

ul#navmenu li:hover a:hover { 
    background-color: red; 
    } 

ul#navmenu ul.sub1 { 
    display: none; 
    position: absolute; 
    top: 25px; 
    right: 00px; 
    } 

ul#navmenu ul.sub2 { 
    display: none; 
    position: absolute; 
    top: 0px; 
    left: 126px; 
    } 

ul#navmenu li:hover .sub1 { 
    display: block; 
    } 

ul#navmenu .sub1 li:hover .sub2 { 
    display: block; 
    } 

.darrow { 
    font-size: 11pt; 
    position: absolute; 
    top: 5px; 
    right: 4px; 
    } 

.rarrow { 
    font-size: 13pt; 
    position: absolute; 
    top: 6px; 
    right: 4px; 
    } 
    body 
{ 
margin-bottom:50px; 
} 
#footer 
{ 
background-color: red; 
position: fixed; 
bottom: 0px; 
left: 0px; 
right: 0px; 
height: 50px; 
margin-bottom: 0px; 

} 
#header 
{ 
background-color: red; 
position: fixed; 
width: 100%; 
height: 50px; 
z-index: 2; 
} 
*{ 
margin: 0px; 
border: 0px; 
padding: 0px; 
spacing: 0px; 
} 
.li2 { 
    width: 125px; 
    text-align: center; 
    position: relative; 
    float: left; 
    margin-right: 0px; 
    } 
</style> 
</head> 
<body> 
<div style="z-index: 3;"> 
<div id="header"> 
header 
</div><br><br><br> 



<ul id="navmenu"> 
<li class="li1"><a href="#">hyperlink 1</a></li> 
<li><a href="#" class="li1">hyperlink 2</a><span class="darrow">&#9660;</span> 
    <ul class="sub1"> 
     <li><a href="#">hyperlink 2.1</a></li> 
     <li><a href="#">hyperlink 2.2</a></li> 
     <li><a href="#">hyperlink 2.3</a></li> 
    </ul> 
</li> 
<li class="li1"><a href="#">hyperlink 3</a></li> 
<li class="li1"><a href="#">hyperlink 4</a><span class="darrow">&#9660;</span> 
    <ul class="sub1"> 
     <li><a href="#">hyperlink 4.1</a></li> 
     <li><a href="#">hyperlink 4.2</a></li> 
     <li><a href="#">hyperlink 4.3</a><span class="rarrow">&#9654;</span> 
      <ul class="sub2"> 
       <li><a href="#">hyperlink 4.3.1</a></li> 
       <li><a href="#">hyperlink 4.3.2</a></li> 
       <li><a href="#">hyperlink 4.3.3</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li class="li2"><a href="#">hyperlink 5</a></li> 
</ul> 






















</div> 
<div id="footer"> 
Footer 
</div> 

</body> 
</html>

來源

2014-10-09 user3551274

JSFiddle中的HTML無效，並且不顯示結果。 – 2014-10-09 09:59:51

@JamesDonnelly關閉它爲我工作的標題 – Akshay 2014-10-09 10:01:03

我無法理解你到底想要什麼 – himanshu 2014-10-09 10:04:35

你的小提琴不會工作，除非你關閉

<title>

入住這http://jsfiddle.net/5xs0Lyu2/6/

首先我添加了一個ID爲下拉，然後添加到了該css

#subclass{ 
margin-top:50px; 
margin-right:120px; 
}

http://jsfiddle.net/5xs0Lyu2/8/

來源

2014-10-09 10:05:22 Akshay

子元素不起作用

回答

相關問題