Пример на
https://jsfiddle.net/ylc66/h6CLm/ отображается правильно, если сохранить в шаблонный html, то подменюшка отображается со смещением. как подправить?
| | html |
| | <!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-type:none;}
ul li {float: left; position: relative}
ul li#blue ul { display:none; position:absolute; top:43px;left:0; width:150px;}
ul li#blue:hover ul { display:block;}
ul ul li {float:none; text-align:left;}
ul li a {text-decoration:none; font-weight:bold; display:block; line-height:2em;color:black; padding:5px 10px;background-color:#F6F6F6;
border-left:1px solid white;border-right:1px solid #999;border-bottom:1px solid #999;}
ul ul li a { font-weight:normal ;border-right: none;border-left: none;}
ul li a:hover {color:white;}
ul ul li a:hover {color:grey;background-color:#40C4D0;}
ul li#green a:hover {background-color:#C5D01C;}
ul li#blue a:hover {background-color:#40C4D0;}
ul li#orange a:hover {background-color:#FF6600;}
ul li#yellow a:hover {background-color:#FFC602;}
ul li#yellowgreen a:hover {background-color:#C5D01C;}
ul li#ligthblue a:hover {background-color:#40C4D0;}
</style>
</head>
<body>
<ul>
<li id="green"><a href="#">Home</a></li>
<li id="blue"><a href="#">About Us</a>
<ul>
<li><a href="#">Productions</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Mission Statement</a></li>
<li><a href="#">Artistic Policy</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">The Board</a></li>
</ul>
</li>
<li id="orange"><a href="#">Participation & Training</a></li>
<li id="yellow"><a href="#">News</a></li>
<li id="yellowgreen"><a href="#">Shop</a></li>
<li id="ligthblue"><a href="#">Contact</a></li>
</ul>
</body>
</html>
|
| | |
