Помогите с версткой горизонтального меню

avatar077 · December 11, 2012

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

<!DOCTYPE html>
<html>
<head>
<style>
body{
background:#6da1da;
width:800px;
}
.padding{
padding-top:10px !important;
}
#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-family: Georgia;
	display: block;
	}
#menu li {
	z-indtx:22;
	display: block;
	list-style: none;
	float: left;
	padding: 0;
	margin: 0;
	width: 150px;
	text-align: center;
	text-shadow:0 0 15px #fff,0 0 15px #fff;
	position: relative;
	padding-top: 12px;
	}
#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
	display: none;
	position: absolute;
	left: 0;
	top: 20px;
	border-top:2px solid #fff;
	border-left:2px solid #fff;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	border-radius: 10px;
	}
#menu li ul li {
	float: none;
	margin: 0;
	width: 150px;
	text-align: center;
	padding-top: 0px;

	}
	#menu li ul li a {
		background:#6da1da;
		padding-top:15px;
		padding-bottom:15px;
		border-radius: 0 0 6px 6px;
	}
	#menu li ul li a:hover {
		background: #fff;

	}
#menu li a {
	display: block;
	width: 150px;

	color: #15477e;
	text-decoration: none;
	}
#menu li:hover ul {
z-index:1;
	display: block;
	}
#menu li:hover {
	text-shadow:0 0 10px #fff,0 0 15px #fff,0 0 20px #fff,0 0 25px #fff;
	}
</style>
</head>
  <body>
  <div style="width:100%;">  
<ul id="menu">
	<li><a href="#">Пункт №1</a></li>
	<li>
		<a href="#">Пункт №2</a>
		<ul>
			<li class="padding"><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №3</a>
		<ul>
			<li class="padding"><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
			<li><a href="#">Подпункт №4</a></li>
			<li><a href="#">Подпункт №5</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №4</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №5</a>
		<ul>
			<li class="padding"><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
			<li><a href="#">Подпункт №4</a></li>
			<li><a href="#">Подпункт №5</a></li>
		</ul>
	</li>
</ul>
</div>
<div>
В России существует множество партий; демократических, коммунистическо-социалистических, националистических и т.д. Все они защищают чьи- то интересы. Первое, что надо сделать, это ответить на вопрос, чьи интересы защищает партия? Партии бывают правые, левые, центристские. Одни защищают интересы какого-то класса или классов, другие являются защитниками наций и народов, есть партии верхушечные, есть партии низовые. Рассмотрев все известные партии, мы можем сделать вывод, что демократические партии созданы для защиты интересов буржуазии, богачей и собственников. Все эти партии являются проводниками идей капитализма и выражают, как правило, интересы международных финансовых групп, так как в России большинство крупных капиталов было создано при помощи зарубежья. Партии классового характера (коммуно-социалисты) являются партиями не общенациональными, а узкоклассовыми, то есть они учитывают интересы только рабочего класса. Партии национального толка защищают интересы нации и народа, откидывают идею классового строения общества, считая ее выдумками Маркса и подобных ему. Попробуем разобраться с идеологией и целями Российских партий.
</div>
  </body>
</html>

Vadimka · December 12, 2012


    #menu li a {
        position: relative;
        z-index: 3;
    }
#menu li ul {
        z-index: 2;
}

http://jsfiddle.net/Qe2Dg/1/ как выглядит

avatar077 · December 12, 2012

Спасибо большое!!!

Sign In

Помогите с версткой горизонтального меню

Question

avatar077

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vadimka

Link to comment

Share on other sites

avatar077

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information